Question

我有一个购物车，显示风味和数量的名称，然后是每种风味的总$。然后在所有味道的底部，我有整个购物车的计算。

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();
});

我的购物车看起来像这样： { ＆＃39;名称＆＃39;：＆＃39;草莓＆＃39;，＆＃39;价格＆＃39;：4.5，＆＃39;数量＆＃39;：0， }， { ＆＃39;姓名＆＃39;：＆＃39; Mint＆＃39;，＆＃39;价格＆＃39;：3.5，＆＃39;数量＆＃39;：0，等等

现在，当我向购物车添加新东西时，总计正在工作，但我如何制作角度＆＃34;倾听＆＃34;当我的输入框中改变了风味的数量？谢谢！

Answer 1

如果函数在范围内，您可以观看它。

$scope.$watch('total()', function(){

});

Answer 2

您应该能够将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＆＃34; watch＆＃34;对象。

$scope.$watch默认情况下仅在对象的引用更改时触发。
$scope.$watchCollection更进一步，当从集合添加或删除元素时触发（即使集合引用保持不变）。

在您的情况下，更改风味的数量不会添加或删除集合中的项目，这就是您的代码未被触发的原因。

你真正想要的是一款深刻的手表＆＃34;购物车对象。这可以通过将第三个参数传递给$watch方法（一个名为objectEquality的布尔值）来实现：

$scope.$watch("cart", function() {
    $scope.total = total();
}, true); // Tells Angular to test object equality.

这将使Angular在被监视对象（不仅仅是引用）的属性中寻找变化，这应该在flavor.quantity更改时触发。

将输入绑定到角度控制器功能

2 个答案: