AngularJS watch array of objects for data change

Question

I'm implementing a shopping cart and want to store the data in localStorage. I want to watch the variable $scope.cart for change so that I can update the localStorage

The cart variable looks like this:

[{'name':'foo', 'id':'bar', 'amount': 1 },...]

This is the code for the watch.

$scope.updateCart = function(){
    localStorageService.add('cart',JSON.stringify($scope.cart));
    alert('cart updated');
};

$scope.$watch($scope.cart, $scope.updateCart(), true);

This is the HTML where the user changes the model.

<li ng-repeat="item in cart">
  {{item.name}} <input type="text" ng-model="item.amount">
</li>

With the following code, the updateCart() method is never triggered. I'm not sure what I'm doing wrong. I check that the $scope.cart variable did change, but the update was not triggered.

Rubens Mariuzzo · Accepted Answer · 2015-11-12 03:58:02Z

41

$watch only evaluate string or function parameter in its first argument. Change your $watch like this :

$scope.$watch('cart.name + cart.id + cart.amount', $scope.updateCart());

OR

$scope.$watch('cart', $scope.updateCart, true);

See reference API

edited Nov 12, 2015 at 3:58

Rubens Mariuzzo

29.4k28 gold badges124 silver badges149 bronze badges

answered Jul 2, 2013 at 7:18

EpokK

38.1k9 gold badges63 silver badges69 bronze badges

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

5 Comments

Tomasz Kowalczyk Over a year ago

Isn't true unnecessary in the first example?

SKuijers Over a year ago

$scope.updateCart will never trigger if you pass it in with parentheses as you would pass the result of the function to the $watch which would be undefined in this case. The correct way is: $scope.$watch('cart', $scope.updateCart, true);

Hovo Over a year ago

cart is an array of objects, it does not have properties like amount

Nate Anderson Over a year ago

@SKuijers I guess that was fixed in this edit: stackoverflow.com/revisions/17419684/3

SKuijers Over a year ago

@TheRedPea yep it seems fixed. Thanks to rubensMaruizzo for the edit

Lee Goddard · Accepted Answer · 2021-03-10 09:30:29Z

29

It is a common mistake to use a variable as the first parameter to the watch expression.

For $scope.cart, you should use the string cart:

$scope.$watch('cart', function () {...}, true)

AngularJs has a new watch method, $watchCollection. It is basically the same as $watch with the object equality option set to true, to watch for a change in a property or an array item.

$scope.$watchCollection('cart', function () {...});

Documentation: $watchCollection.

edited Mar 10, 2021 at 9:30

Lee Goddard

11.3k5 gold badges53 silver badges71 bronze badges

answered Mar 23, 2014 at 5:32

Jin

1,08410 silver badges10 bronze badges

2 Comments

Ziarno Over a year ago

$watchColletion saved me, when pushing / removing items from an array. Thanks!

Nate Anderson Over a year ago

It's unclear what kind of change the OP wanted, but as seen here $watch(.., .., true) detects even more changes, namely this type of change: $scope.cart[0].name= "Foo Bar";

Blazemonger · Accepted Answer · 2014-01-31 21:40:25Z

1

try to change

$scope.$watch($scope.cart, $scope.updateCart(), true);

to

$scope.$watch('cart', $scope.updateCart(), true);

$watch only evaluate string or function parameter in its first argument

edited Jan 31, 2014 at 21:40

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

answered Jul 2, 2013 at 5:20

Roger Jin

5635 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS watch array of objects for data change

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related