下面的脚本显示了使用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>
发布于 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;
}
发布于 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;
}
发布于 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)
https://stackoverflow.com/questions/22731145
复制相似问题