Angularjs Examples

AJS Examples


AngularJS $scope.$watchCollection() Function

The AngularJS $watchCollection method is used to observe properties on a single object and notify you if one of them changes. In other word watchCollection is shallow watches the properties of an object and fires whenever any of the properties change. This method is for watching changes of scope variables. This method has callback function which gets called when the watching properties are changed.

The $watchCollection method requires two parameters: obj and listener parameters.

Syntax

$scope.$watchCollection(obj, listener);
  • In the $watchCollection method watchExpression is the object collection in the scope to watch via standard $watch operation.
  • In the $watchCollection listener is a function that is called whenever anything within the obj has changed.

AngularJS $scope.$watchCollection() Function Example

<!DOCTYPE html>        
<html>        
<head> <!-- www.techstrikers.com -->        
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>         
    <meta charset="utf-8">        
    <title>AngularJS $watchCollection Example</title>        
  <script>        
var app = angular.module('app', []);        
    app.controller("WatchGroupController", function ($scope) {
		$scope.count = 0;
		$scope.Fruits = [
			{value: 'Orange'},
			{value: 'Apple'},
			{value: 'Banana'},
			{value: 'Papaya'},
			{value: 'Kiwi'}
		];

		$scope.$watch('Fruits', function() {
			$scope.count += 1;
		}, true);
    });
</script>        
</head>        
<body style="background-color:#DDE4E9;">        
  <fieldset style="background-color:#DDE4E9;">                    
    <legend>AngulerJS $watchCollection Function Example</legend>         
  <div ng-app="app">              
    <div ng-controller="WatchGroupController"> 
      <div ng-repeat="fruit in Fruits">
        <input type="text" ng-model="fruit.value" />
   <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">
			{{fruit.value}}
		  </p>
	</div>
    </div>              
</div>        
 </fieldset>         
</body>        
</html>   
See Live Example