AngularJS: Array and deep $watch doesn't work

Question

I have an array with boolean values and what I need to do is try to use the $watch function in order to show a message when some change happens in the array.

As you can see in this code the array changes its values but the $watch function doesn't work. Any idea?

View

<div data-ng-repeat="catA in categoryA">
    <b><input type="checkbox" checked="checked" ng-model="arrayCategoryA[$index]"/>{{catA.name}}</b>
</div>

Controller

app.controller("controllerApp", function($scope, $http, $filter){

  $scope.arrayCategoryA = [];

  $scope.$watchCollection($scope.arrayCategoryA, function(newVal, oldVal){
    console.log("something changed");
  }, true);

  $http.get("categoryA.json").success(function(data) {
     $scope.categoryA = data;
     for (var i = 0; i < $scope.categoryA.length; i++) 
     $scope.arrayCategoryA[i] = true;
  });

});

Mark Coleman · Accepted Answer · 2016-12-25 01:07:29Z

2

$watchCollection takes a watch expression and in this case is the name of the scope variable of arrayCategoryA.

 $scope.$watchCollection(`arrayCategoryA`, function(newVal, oldVal){
    console.log("something changed");
  }, true);

Updated working plunkr

answered Dec 25, 2016 at 1:07

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

1 Comment

wilson Over a year ago

Thanks man, I have another little problem with a $watch function and multiple expressions. Please, see this updated code plnkr.co/edit/Wj3ICWeY17E2q0SlXk5z?p=preview

Collectives™ on Stack Overflow

AngularJS: Array and deep $watch doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related