Question

我有一个像这样的对象数组......

[{ name: 'foo', price: 9.99, qty: 1 }]

UI允许将新项目添加到此阵列。我试图收听要添加的新项目以及每个项目的qty属性的更改。

$scope.order = [];
$scope.totalItems = 0;
$scope.$watchCollection('order', function() {
    $scope.totalItems = $scope.order.reduce(function(memo, o) {
        return memo + o.qty;
    }, 0);
});

$scope.addItem = function() {
    $scope.order.push({
        name: $scope.item.name,
        qty: 1,
        options: []
    });
};

正如您从中可以看到的那样... http://d.pr/v/MJzP添加新项目时会触发此功能，但qty更改新项目时不会触发此功能。

Answer 1

也许您应该在数量输入框中附加ngChange？喜欢这个

<input ng-model="item.qty" ng-change="calculateTotal()" type="number"/>

然后在你的控制器中：

$scope.calculateTotal = function() {
  $scope.totalItems = $scope.order.reduce(function(memo, o) {
    return memo + o.qty;
  }, 0);
};

然后在添加项目功能结束时：

$scope.addItem = function() {
  // Your logic
  $scope.calculateTotal();
};

编辑：在考虑更多内容后，调用ngChange函数时可能会自动调用addItem，因此从addItem调用它可能不会完全必要

$ watch未在angular中的新项目上的对象数组中找到属性的更改

1 个答案: