AngularJS：ng-repeat-如何更新使用ng-repeat创建的列表的总和？
[英]Angularjs : ng-repeat - how to update total sum of list created using ng-repeat?
问题描述
I am new to angularjs and trying to create a very simple page, where I am displaying product, price, quantity, subtotal (price * quantity) and Total sum. 
我是angularjs的新手，并试图创建一个非常简单的页面，其中显示了产品，价格，数量，小计（价格*数量）和总和。 I want, if user update quantity then subtotal and total sum should update at real time. 我想要，如果用户更新数量，则小计和总金额应实时更新。 I tried but couldn't get it. 我试过了但是没办法。 Trying like this : 尝试这样：
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Price * Quantity</th>
</tr>
</thead>
<tbody ng-init="total = 0">
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td><input value="{{ product.quantity }}"></td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{ total }}</b></td>
</tr>
</tbody>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var i = 0;
$scope.products = [
{
"name": "Product 1",
"quantity": 2,
"price": 10
},
{
"name": "Product 2",
"quantity": 6,
"price": 8
},
{
"name": "Product 3",
"quantity": 5,
"price": 26
},
{
"name": "Product 4",
"quantity": 10,
"price": 4
},
{
"name": "Product 5",
"quantity": 11,
"price": 7
}
];
});
</script>
</body>
Here is my whole code till now : http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview 到目前为止，这是我的完整代码： http : //plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview
Thanks in advance! 提前致谢！
Note : This all stuff I want to do in angular way ie only in HTML. 注意 ：我想以有角度的方式来完成所有这些工作，即仅在HTML中。 This data script will go in .js file 该数据脚本将放入.js文件
3 个解决方案
解决方案1
1 2017-08-04 05:37:52
Just make a function that counts the total every time you change the value 只需创建一个函数即可在每次更改值时计算总数
table body Html 表体HTML
<tbody ng-init="total = 0">
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td><input ng-change="updateTotal()" ng-model="product.quantity"></td>
<td>${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{ total }}</b></td>
</tr>
</tbody>
And add a function in JS 并在JS中添加一个功能
$scope.updateTotal = function(){
$scope.total = 0;
for(product of $scope.products){
$scope.total += product.quantity * product.price
}
}
解决方案2
1 已采纳 2017-08-04 05:42:03
Please refer to updated link http://plnkr.co/edit/HOCVZC2p3xfG2apoKJDW?p=preview You don't have a function to calculate totals. 请参阅更新的链接http://plnkr.co/edit/HOCVZC2p3xfG2apoKJDW?p=preview您没有用于计算总数的函数。 You need to add it and call the function on change of any quantity text box. 您需要添加它并在更改任何数量的文本框时调用该函数。 You also need to add an change event to all the text boxes for quantity ng-change="updateTotal()" 您还需要向所有文本框中添加一个更改事件，用于数量ng-change="updateTotal()"
$scope.updateTotal = function(){
$scope.total = 0;
angular.forEach($scope.products, function(product){
$scope.total += product.quantity*product.price;
});
};
解决方案3
0 2017-08-04 05:39:23
Have a function to get the total, 具有获取总数的功能，
$scope.getTotal = function() {
var total = 0;
for (var i = 0; i < $scope.products.length; i++) {
var product = $scope.products[i];
total += (product.price * product.quantity);
}
return total;
}
call the function when the quantity changes, 数量变化时调用该函数，
<td>
<input ng-model="product.quantity" ng-change="getTotal()">
</td>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.