Blog

  • welcome to my new Angularjs blog in which I'll be looking at something called Angular Watch now angular watch is basically used to watch a variable and in Angular what happens is there's something called as a digest cycle so this digest cycle actually runs every time to check the update to any variable which is registered in angular. Unfortunately in angular you can't register every of the variable or ng-model so angular provides us an option called "watch".

     

    Example : let's say we have a text box and I want to know how many times this text box has been modified now with angular we can do easily so we need to have a counter and a counter which will watch this input text box so let's say you updated text box counter times now this counter would be under our control in the controller of JS.

     

    HTML

    <body ng-app="mainApp" ng-controller="app">
    	<input type="text" ng-model="myText">
    	<br> You updated textbox: {{ counter }} times.
    </body>
    

     

    JS

    app.controller('app', function($scope) {
    	$scope.counter = 0;
    	$scope.$watch('myText', function(newValue, oldValue) {
    		console.log("newValue : ",newValue);
    		//console.log("oldValue : ",oldValue);
    	});
    });
    

     

    Now what we want to do is we want to watch on myText so whenever myText is updated or hindered or whatever then what I want to do is I want to run a function and this function would be populated by angular by two arguments precisely the newValue and the oldValue Now check out the results in the browser:

     

    Enter value in textBox : 12345
    
    Output: 
    newValue: undefined
    newValue: 1
    newValue: 12
    newValue: 123
    newValue: 1234
    newValue: 12345
    

     

    Now let's check oldValue results :

     

    JS

    app.controller('app', function($scope) {
    	$scope.counter = 0;
    	$scope.$watch('myText', function(newValue, oldValue) {
    		// console.log("newValue : ",newValue);
    		console.log("oldValue : ",oldValue);
    	});
    });
    

     

    Enter value in textBox : 12345
    
    Output: 
    oldValue: undefined
    oldValue: undefined
    oldValue: 1
    oldValue: 12
    oldValue: 123
    oldValue: 1234
    oldValue: 12345
    

     

    Since we don't have any use with newValue and oldValue for this logic so I just want to do $scope.counter++ so what it does is whenever this is hindered or modified or edited then this counter would be updated so when I reload this it shows me 1 times because when this starts then the scope.watch runs the first time and this is the reason we got all new value as undefined in our first run so if I do like $scope.counter = -1; then this would fix our error so let's just update:

     

    JS

    app.controller('app', function($scope) {
    	$scope.counter = -1;
    	$scope.$watch('myText', function(newValue, oldValue) {
    		// console.log("newValue : ",newValue);
    		console.log("oldValue : ",oldValue);
    	});
    });
    

     

    Now, this is not a characters counter if you see that if you will remove the characters it's not decreasing the count value it's just telling us how many times this $scope.watch has been called.I hope you guys learned something useful about $scope.watch.

     

Tags: AngularJS