如何使用AngularJS计算购物车中的总金额？

在购物车页面上，我有一个要购买的物品列表和每个物品数量的乘法器。我让每一行计算当前项目的小计价格，但我无法计算所有项目的总价。 正如您所看到的，我尝试使用“total”变量来完成此操作，但是如果我想更正每个项目的数量，“total”保持不变。它只设置一次值，因为它不是函数。 我该如何改变这一点？基本上我需要总结一个专栏，但我被困在这里了。我只是不知道怎么称呼它。这是我能做的最好的了，因为我是个新手

    <tr class="cart_item" ng-repeat="p in ctrl.items" ng-init="total = 0">
          <td class="product-name" ng-bind="p.name.value"></td>
          <td class="product-price">
                   <input type="number" ng-model="item.cost" ng-init="item.cost=p.price.value" value="{{p.price.value}}">    
          </td>
          <td class="product-quantity">
                   <input type="number" ng-model="item.qty" ng-init="item.qty=1">
          </td>
          <td class="product-subtotal">
                   <span ng-init="$parent.total = $parent.total + (item.cost * item.qty)">{{item.cost * item.qty}}</span>
          </td>
    </tr>

    <tr class="cart_item">
          <td class="product-name">TOTAL FOR ALL ITEMS:</td>
          <td class="product-price"></td>
          <td class="product-quantity"></td>
          <td class="product-subtotal">
                  <span class="amount">{{ total }}</span>
          </td>
    </tr>

{{item.cost*item.qty}
所有项目的总计：
{{total}}

使用

ctrl

怎么样

<table ng-app="ShoppingCart" ng-controller="CartController as ctrl">
    <tr class="cart_item" ng-repeat="item in ctrl.items" ng-init="total = 0">
        <td class="product-name" ng-bind="item.name.value"></td>
        <td class="product-price">
            <input type="number" ng-model="item.cost" ng-init="item.cost = item.price.value">
        </td>
        <td class="product-quantity">
            <input type="number" ng-model="item.qty" ng-init="item.qty = 1">
        </td>
        <td class="product-subtotal">
            <span>{{item.cost * item.qty  | currency: '£'}}</span>
        </td>
    </tr>

    <tr class="cart_item">
        <td class="product-name">TOTAL FOR ALL ITEMS:</td>
        <td class="product-price"></td>
        <td class="product-quantity"></td>
        <td class="product-subtotal">
            <span class="amount">{{ ctrl.total() | currency: '£' }}</span>
        </td>
    </tr>
</table>

---

示例：

很抱歉，您的代码很乱。。。调用

$parent

并在视图中显示真实的计算逻辑。。。除此之外，仅仅看到这一小段代码是很难帮助的。。。我建议至少在控制器级别执行业务逻辑，最好在服务级别执行。但不是在视图级别！在

ng repeat

中增加您的

$parent.total

是一种非常简单的方法。。。每次它重新调用摘要循环时。。。如果这是付费项目的代码，请。。。重新思考！看到这个daan.desmedt，当然我不喜欢$parent.total决策，我也想避免它，可能控制器中有一个函数，但我不知道如何在有可编辑数量的情况下进行。您的数据不应该被计算并保持在视图级别，有大量教程/指南介绍如何通过AngularJs中的“MVC”原则，伙计，这是100%的成功！祝你好运！

var app = angular.module("ShoppingCart", []);

app.controller('CartController', [function() {
    var ctrl = this;

    ctrl.items = [{
        name: {
            value: 'Item #1'
        },
        price: {
            value: 1
        }
    }, {
        name: {
            value: 'Item #2'
        },
        price: {
            value: 2
        }
    }]

    ctrl.total = function() {
        return ctrl.items.reduce(function(acc, item) {
            return acc + (item.cost * item.qty);
        }, 0);
    }
}]);