首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >计算AngularJS ng-repeat中重复元素的总和

计算AngularJS ng-repeat中重复元素的总和
EN

Stack Overflow用户
提问于 2014-03-29 20:34:39
回答 15查看 250.8K关注 0票数 110

下面的脚本显示了使用ng-repeat的购物车。对于数组中的每个元素,它显示项目名称、数量和小计(product.price * product.quantity)。

计算重复元素总价格的最简单方法是什么?

代码语言:javascript
复制
<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>
EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2014-03-29 20:53:46

在模板中

代码语言:javascript
复制
<td>Total: {{ getTotal() }}</td>

在控制器中

代码语言:javascript
复制
$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;
}
票数 151
EN

Stack Overflow用户

发布于 2015-01-09 22:58:35

意识到这一点很久以前就回答了,但想要发布不同的方法没有提出...

使用ng-init统计您的总数。这样,您就不必在HTML中迭代和在控制器中迭代。在这个场景中,我认为这是一个更干净/更简单的解决方案。(如果计数逻辑更复杂,我肯定会建议适当地将逻辑移动到控制器或服务。)

代码语言:javascript
复制
    <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字段:

代码语言:javascript
复制
// random controller snippet
function yourController($scope..., blah) {
    var vm = this;
    vm.Total = 0;
}
票数 41
EN

Stack Overflow用户

发布于 2016-05-05 16:34:31

您可以通过以下方式计算ng-repeat内部的总金额:

代码语言:javascript
复制
<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)

票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22731145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档