AngularJS $watch $watchCollection and $watchGroup Method -Tutorial Savvy

AngularJS 1.3 release candidate provides $watch(), $watchCollection() and $watchGroup() method.

These methods are for watching changes of scope variables.Each of these methods has callback function which gets called when the watching properties are changed.

$watch method is for watching single scope properties.

$watchCollection() method is for watching a scope property of collection in nature like Array.

$watchGroup() method is for watching a group of scope properties in AngularJS application.

In this Demo,"We will create 3 different examples for $watch,$watchCollection and $watchGroup method".

Below code shows the demo for all the above three methods.

<!DOCTYPE html>
<html ng-app="myApplication">

<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
    <meta charset="utf-8">
    <title>$parse Service</title>
</head>

<body ng-controller="MyController">
    <h1>$watch Example</h1>
    <h5>Number: {{aNumber}}{{typeOfNumber}}</h5>
    <button ng-click="addOne()">+1</button>
    <br/>
    <br/>
    <hr>

    <h1>$watchCollection Example</h1>
    <h5>Array Collection: {{numArray}}</h5>
    <h5>Length of Array: {{numArrayLength}}</h5>
    <input type="number" ng-model="newNumber">
    <button ng-click="pushNumber()">push</button>
    <br/>
    <br/>
    <hr>
    <h1>$watchGroup Example</h1>
    <h5>Number 1: {{number1}}{{typeOfNumber1}}</h5>
    <h5>Number 2: {{number2}}{{typeOfNumber2}}</h5>
    <h5>Number 3: {{number3}}{{typeOfNumber3}}</h5>
    <button ng-click="addOneAll()">+1 All</button>
    <script>
        var myApplication = angular.module("myApplication", []);

        myApplication.controller("MyController",
            function($scope) {
                $scope.aNumber = 4;
                $scope.addOne = function() {
                    $scope.aNumber++;
                };
                $scope.$watch("aNumber", function(newValue, oldValue) {
                    $scope.typeOfNumber = $scope.aNumber % 2 === 0 ? "Even" : "odd";
                });

                $scope.numArray = [2, 3, 4];
                $scope.pushNumber = function() {
                    $scope.numArray.push($scope.newNumber);
                };
                $scope.$watchCollection("numArray", function(newValue, oldValue) {
                    $scope.numArrayLength = $scope.numArray.length;
                });

                $scope.number1 = 9;
                $scope.number2 = 22;
                $scope.number3 = 112;
                $scope.addOneAll = function() {
                    $scope.number1++;
                    $scope.number2++;
                    $scope.number3++;
                };

                $scope.$watchGroup(['number1', 'number2', 'number3'], function(newValues, oldValues) {
                    $scope.typeOfNumber1 = newValues[0] % 2 === 0 ? "Even" : "odd";
                    $scope.typeOfNumber2 = newValues[1] % 2 === 0 ? "Even" : "odd";
                    $scope.typeOfNumber3 = newValues[2] % 2 === 0 ? "Even" : "odd";
                });
            });
    </script>
</body>

</html>

The demo and output of the above code is embedded in below JSBIN link..

$watch-collection-Group Service

AngularJS $watch $watchCollection and $watchGroup Method

Related

Sandeep