top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Explain $watch(), $watchgroup() and $watchCollection() functions of scope?

0 votes
306 views
Explain $watch(), $watchgroup() and $watchCollection() functions of scope?
posted Oct 24, 2017 by Latha

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

$watch - This function is used to observe changes in a variable on the $scope. It accepts three parameters:
expression, listener and equality object, where listener and equality object are optional parameters.
$watch(watchExpression, listener, [objectEquality])
Here, watchExpression is the expression in the scope to watch. This expression is called on every $digest() and
returns the value that is being watched.
The listener defines a function that is called when the value of the watchExpression changes to a new value. If the
watchExpression is not changed then listener will not be called.
The objectEquality is a boolean type which is used for comparing the objects for equality using angular.equals
instead of comparing for reference equality.

scope.name = 'shailendra';
scope.counter = 0;
scope.$watch('name', function (newVal, oldVal) {
 scope.counter = scope.counter + 1;
});

$watchgroup - This function is introduced in Angular1.3. This works the same as $watch() function except that
the first parameter is an array of expressions to watch.
$watchGroup(watchExpression, listener)
The listener is passed as an array with the new and old values for the watched variables. The listener is called
whenever any expression in the watchExpressions array changes.

$scope.teamScore = 0;
$scope.time = 0;
$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) { 
if(newVal[0] > 20){
 $scope.matchStatus = 'win';
 }
 else if (newVal[1] > 60){
 $scope.matchStatus = 'times up';
 });

$watchCollection - This function is used to watch the properties of an object and fires whenever any of the
properties change. It takes an object as the first parameter and watches the properties of the object.
$watchCollection(obj, listener)
The listener is called whenever anything within the obj has been changed.

$scope.names = ['shailendra', 'deepak', 'mohit', 'kapil'];
$scope.dataCount = 4;
$scope.$watchCollection('names', function (newVal, oldVal) {
 $scope.dataCount = newVal.length;
});
answer Oct 24, 2017 by Shivaranjini
...