我有一个购物车，其中显示了风味的名称和数量，然后显示每种风味的总价。然后，在所有样式的底部，我都对整个购物车进行了计算。
HTML：
<div ng-repeat="flavor in cart track by $index">
<div>
<span class="flavor-name no-margin">{{flavor.name}} x <input type="text" name="{{flavor.name}}" size="1" ng-model="flavor.quantity"></span>
<span class="flavor-price no-margin">{{flavor.price * flavor.quantity | currency }}</span>
<div class="clearfix"></div>
</div>
</div>
<div ng-if="cart.length > 0">
<span class="cart-total-text no-margin">Total:</span>
<span class="cart-total no-margin">{{ total | currency}}</span>
<div class='clearfix'></div>
</div>
在我的控制器中：
function total() {
var total = 0;
for (var i = 0; i < $scope.cart.length; i++) {
var add = $scope.cart[i].price * $scope.cart[i].quantity;
total = total + add;
}
return total;
}
$scope.$watchCollection("cart", function() {
$scope.total = total();
});
我的购物车看起来像这样：{'name'：'Strawberry'，'price'：4.5，'quantity'：0，}，{'name'：'Mint'，'price'：3.5，'quantity'：0 ， }， 等等
现在，当我向购物车中添加新东西时，总数量是有效的，但是当我在输入框中更改风味的数量时，如何使角度“倾听”呢？谢谢！
您应该能够将total()函数放在作用域上并将其绑定到范围：
在HTML中：
<span class="cart-total no-margin">{{total() | currency}}</span>
在控制器中：
$scope.total = function() {
var total = 0;
for (var i = 0; i < $scope.cart.length; i++) {
var add = $scope.cart[i].price * $scope.cart[i].quantity;
total = total + add;
}
return total;
}
每当变化（例如数量）变化时，Angular应触发摘要循环并重新评估所有绑定的表达式，包括total()方法。
IMO这是最简单的方法。如果您真的想使用$ watch路线（或了解为什么当前代码无法正常工作），则必须了解Angular如何“监视”对象。
$scope.$watch默认情况下，仅在对象的引用发生更改时才会触发。
$scope.$watchCollection再往前走一点，并在从集合中添加或删除元素时触发（即使集合引用保持不变）。
就您而言，更改风味的数量不会添加或删除集合中的项目，这就是为什么不会触发代码的原因。
您真正想要的是对购物车对象的“深入观察”。这可以通过将第三个参数传递给$watch方法（称为的布尔值objectEquality）来实现：
$scope.$watch("cart", function() {
$scope.total = total();
}, true); // Tells Angular to test object equality.
这将使Angular寻找受监视对象（而不仅仅是引用）的属性发生变化，当flavor.quantity更改时，该属性将触发。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句