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);
$watchCollection
method watchExpression
is the object collection in the scope to watch via standard $watch
operation.$watchCollection
listener is a function that is called whenever anything within the obj
has changed.
<!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>