计算AngularJS ng-repeat中重复元素的总和
计算AngularJS ng-repeat中重复元素的总和
提问于 2014-03-29 20:34:39
下面的脚本显示了使用ng-repeat的购物车。对于数组中的每个元素，它显示项目名称、数量和小计(product.price * product.quantity)。
计算重复元素总价格的最简单方法是什么？
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price * product.quantity}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td></td> <!-- Here is the total value of my cart -->
</tr>
</table>回答 15
Stack Overflow用户
回答已采纳
发布于 2014-03-29 20:53:46
在模板中
<td>Total: {{ getTotal() }}</td>在控制器中
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.cart.products.length; i++){
var product = $scope.cart.products[i];
total += (product.price * product.quantity);
}
return total;
}Stack Overflow用户
发布于 2015-01-09 22:58:35
意识到这一点很久以前就回答了，但想要发布不同的方法没有提出...
使用ng-init统计您的总数。这样，您就不必在HTML中迭代和在控制器中迭代。在这个场景中，我认为这是一个更干净/更简单的解决方案。(如果计数逻辑更复杂，我肯定会建议适当地将逻辑移动到控制器或服务。)
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td ng-init="itemTotal = product.price * product.quantity; controller.Total = controller.Total + itemTotal">{{itemTotal}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td>{{ controller.Total }}</td> // Here is the total value of my cart
</tr>
当然，在您的控制器中，只需定义/初始化您的Total字段：
// random controller snippet
function yourController($scope..., blah) {
var vm = this;
vm.Total = 0;
}Stack Overflow用户
发布于 2016-05-05 16:34:31
您可以通过以下方式计算ng-repeat内部的总金额：
<tbody ng-init="total = 0">
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.quantity }}</td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td>${{ total }}</td>
</tr>
</tbody>检查结果：http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview
万一自动更新结果：http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (感谢- VicJordan)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22731145
复制相关文章
相似问题
腾讯云开发者
