AngularJS - 监视数组和更新对象

Question

我试图弄清楚如何观看数组并更新对象，就像这样。

var vm = this; //controller
vm.order = {
    totalValue: 25,
    products: [{id:0, val: 10, qtd: 1}, {id:1, val: 15, qtd: 1}]
};

如果我将新产品推送到此订单对象中，如何仅在观看收集时更新totalValue？ （totalValue = All Val * All Qtd）

这是必要的，因为＆＃34; qtd＆＃34;字段绑定到输入字段，因此我可以更改所有＆＃34;产品的值＆＃34;在任何时候。

更新

$scope.$watchCollection(
            function() { return self.order.products; }, 
            function(products) {
                self.order.totalValue = products.reduce(function (p, n) {
                    console.log(n.qtd);
                    console.log(n.val);
                    return p + n.qtd * n.val;
                }, 0);
            });

代码有效，但只有当我推出一个新产品时才会这样做。按顺序。 每次用户更改产品的qtd时，我必须观察每个order.products.product.qtd并更改order.totalValue

Answer 1

尝试这种方式：

$scope.$watch('order.products', function (products) {
    scope.order.totalValue = products.reduce(function (p, n) {
        return p + n.qtd * n.val;
    }, 0);
}, true);

这将深度监视数组以检测数组项中的qtd和val更改。