$watch() in angular
JS is the function of $scope object. Watchers in angular JS are used to observe
the state of the variable which means whenever the $scope variable or model
variable has been changed the watcher will listen over it and updates the
variable value.Angular, also gave us
option to make use of watcher mannually by using this $watch programmatically even.In this section I’m
going through, how to use the $watcher function.
To know more about
watchers theory follow my link : Watchers in angular JS .
Syntax of
$scope.$watch:
$scope.$watch('modelvalue',
function (newval,oldval) { }
);
In the above syntax
If we observe, the $watch() function accepts two arguments.
1st
parameter : The first parameter is the name of our model. Means we are asking
watcher manually to take an eye over the model or variable that what we needed.
2nd
parameter : The second parameter in the $watch function is used to be called as
listener function. This listener function accepts two parameters the first
parameter will catches the newly assigned value to our model which we asked to
change. The second parameter is the old value of our model which contains the value
before we changed the model value.
Let’s move on with an
example on using $scope.$watch() :
I’m taking the scenario
as like displaying the dropdownlist’s selected previous text and current
selected text.
Script :
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrlr',
['$scope', function ($scope) {
$scope.Departments = [
{ "deptno": "1", "deptname": "Architect" },
{ "deptno": "2", "deptname": "Developer" },
{ "deptno": "3", "deptname": "Tester" },
{ "deptno": "4", "deptname": "Sales" }
]
$scope.$watch('dept.deptname', function (newval,oldval) {
$scope.dept.deptname = newval;
if (oldval == null) $scope.prevselect = "Selection was not
changed";
else
$scope.prevselect = oldval;
});
}]);
</script>
Application name : ‘myapp’
Controller name : ctrlr
Model : $scope.Departments is the model variable which I had taken to bind the data of departments in the dropdownlist.
$watch function : In the first parameter ‘dept.deptname’ is the model variable which I passed a string to the function asking it to watch the changes done over the model.
To the second parameter I passed the function, within that I used the code to assign the old value(by using $scope.prevselect) and new value(by using $scope.dept.deptname) which we use in our view to display.
Controller name : ctrlr
Model : $scope.Departments is the model variable which I had taken to bind the data of departments in the dropdownlist.
$watch function : In the first parameter ‘dept.deptname’ is the model variable which I passed a string to the function asking it to watch the changes done over the model.
To the second parameter I passed the function, within that I used the code to assign the old value(by using $scope.prevselect) and new value(by using $scope.dept.deptname) which we use in our view to display.
View Code :
<body
ng-app="myapp" ng-controller="ctrlr">
<select ng-model="dept" ng-options="x.deptname for x in
Departments track by x.deptno" >
<option value="">--select--</option>
</select> <br />
<span>Current selection is :
{{dept.deptname}}</span><br />
<span>Previous selection is :
{{prevselect}}</span>
</body>
In the above view code, I had filled the dropdownlist by using the ng-options.
Below the dropdownlist we can find two span tags one for displaying the changed value that is done by our model “dept” which is model in dropdownlist code as an object.
To know more about dropdownlist click the link : Dropdownlist in angular JS
Below the dropdownlist we can find two span tags one for displaying the changed value that is done by our model “dept” which is model in dropdownlist code as an object.
To know more about dropdownlist click the link : Dropdownlist in angular JS
In my second span I’m
displaying the previous value which comes from our $watch().
Result of above script & view code will be as follows :
Result of above script & view code will be as follows :
Note : In the first parameter of $watch function instead of the string with model variable, angular also provided a way to pass the value by using the function with one parameter as scope. This function again returns the scope variable like below.
$scope.$watch(function(scope) { return 'modelvariable' },
function (newval,oldval) { }
);
No comments:
Post a Comment