CODEWITHSUNDEEP
javascriptarraysangularjsangularjs-scopeangularjs-watch
gh9
gh9

Reputation: 10703

angular $scope.$watch on array calling update function

In my plunk I have an array of integers, that I have attached $scope.$watch to. When I update the array, my $scope.$watch isnt firing a console.log. Why is my console.log not being called?

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="test" ng-controller="testArray">

    <div ng-repeat="item in MyArray track by $index"> {{item}}</div>
    <button ng-click="add()">testing Add</button>
  </body>

</html>
<script type="text/javascript">
    'use strict';
    var app = angular.module('test', []);

    app.controller('testArray',['$scope',function($scope){

      $scope.MyArray = [1,2,3,4]

      $scope.add = function(){
        $scope.MyArray.push($scope.MyArray.length+1);
      }
    $scope.$watch('MyArray' , function(){
      console.log($scope.MyArray);
    })
    }]);

</script>

Upvotes: 1

Views: 812

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You could use $watchCollection, It would be less expensive than the deep watcher by just providing true option in $watch function.

$scope.$watchCollection('MyArray' , function(){
    console.log($scope.MyArray);
})

The $watchCollection() goes one-level deep and performs an additional, shallow reference check of the top level items in the collection.

If you have really big array on which you wanted to keep watch then don't go for $watch with true(deep watcher). For 1000/2000 records, you will feel lag in angular bindings. So preferred approach would be avoid watcher as much as you can OR just go for $watchCollection

Upvotes: 2

Renan Ferreira
Renan Ferreira

Reputation: 2150

Change your code to 

$scope.$watch('MyArray' , function(){
    console.log($scope.MyArray);
}, true)

Looking at the documentation, you will see that the third parameter indicate that the $watch method will use object equality to determine if your array has changed. It means that angular will use the angular.equals method that supports arrays comparison, for example

Upvotes: 4

Related Questions