1
このコードをAngularJSに書いて、項目名、価格、数量を追加したいと思います。この項目は下の表に表示され、配列として保存されます。後で、私は総手形を見つける。動的に追加されない項目のリスト
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "text" ng-model="price"></td>
<td><input type = "text" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button onClick="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.createItem = function($scope) {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
</script>
</body>
</html>
私はそれが働いていないことを間違っている、とどのようにDBに保存するオブジェクトとして、この配列を集めることになっているものを私を導いてください。動的に表示するために新しいディレクティブテンプレートが追加されるたびに、オブジェクトを配列に追加する方法、どのように角を持ってこれを実現できるかはわかりません。
ありがとうございます。
あなたのコードは、総除き完全に正常に動作します間違いがたくさんある、このコードを試してみてください私が参考になるように、あなたの助けを借りて、私の間違いを指摘してくれてありがとう。 :) – Nik
このコードのコードスニペットボタンを追加するには？ – Nik
承認済み:)。ありがとう:) – Nik