Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>$watch-collection-Group 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>
  
  
</body>
​
​
</html>
 
​
    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"; 
});
  
  
                
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x