AngularJS - Watch array and update object

Question

I'm trying to figure out how to watch an array and update an object, like this.

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

If I push a new product into this order object, how do I update the totalValue just watching the collection ? (totalValue = All Val * All Qtd)

It is necessary because the "qtd" field is bind to an input field, so I can change the value of all "products" at any time.

UPDATE

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

The code worked, but only when I push a new "product" into order. I have to watch every order.products.product.qtd and change the order.totalValue every time the user change the qtd of a product

karaxuna · Accepted Answer · 2016-02-03 00:18:34Z

1

Try this way:

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

This will deep watch array to detect qtd and val changes inside array items.

edited Feb 3, 2016 at 0:18

answered Feb 2, 2016 at 23:29

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lucas Freitas Over a year ago

What if I have instead of "$scope.orders" I has "var vm = this; vm.orders" ? I've updated the question

raina77ow Over a year ago

Then you'll have to adjust your function accordingly like described here.

Lucas Freitas Over a year ago

Thanks very much for the help @karaxuna

Collectives™ on Stack Overflow

AngularJS - Watch array and update object

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related