Skip to main content

How to use $watch in angularJS

$watch in angularJS


           watch method is listening component, what your mention to $watch expression name. If your mention of ng-model, this model have any reaction happen from your ng-model like your declared text type this ng-model happen key press or key type means that time this $watch method take every single action from corresponding ng-model. This action take and do it your new functionality of every single action process.

       $watch method main purpose to happen every single action made to logic needed to apply from that location. Like key up and down function logic validation apply logic from here.

      Example for your need to apply not allow space bar from your email id field that logic problem is need to apply for $watch method.

$watch(watchExpression, listener, [objectEquality]);

watchExpression - This is for reference to ng-model name declaration 

listener - Listener is make function when it action happen that time to trigger for this listener function

ObjectEquality - This comparative old action object and current object reference equal process

$watch method Example   

Html:
<div ng-app="watchApp">
    <div ng-controller="watchController">
        <input type="text" ng-model="name" ng-trim='false'/>
    </div>
</div>

Javascript :
var app = angular.module('watchApp',[]);
app.controller("watchController",['$scope','$timeout',function($scope, $timeout){
    $scope.name = "";
    $scope.$watch("name",function(){
        $scope.name = $scope.name.toLowerCase().replace(/\s+/g,'');
    });
}]);

Result:
   
       

Comments

Popular posts from this blog

A simple start and stop timer counter in angularjs

     AngularJs using to create a start and stop counting timer functionality application. This application is need the following directive like $interval and $filter , We create default time object is display current timer clock functions.         A timer counter is have three functionality as below that start, stop and reset. A start function is called to start the $ interval directive to active so now counter is begin, This moment you are unable to proceed a reset logic.         Stop function is is call to $ interval belongs one of the method like cancel , This method make corresponding active interval prose is stop it. Reset function is call to reset all scope value is to be zero. HTML: <div ng-app="timerApp">     <div ng-controller="timerController">         Current Time : {{time}} <br/>         <hr/>                <Button ng-click="timer_start()">Start</Button>         <Button ng-click=&

How to use ng-href directive in AngularJS

ng-Href Directive                  ng-Href directive is hyper link markup to a text in angularJs. This hyperlink will change able to implement dynamic url {{hash}} value. Hash value to assign in a controller to happened user click event fire to assign dynamic url. This Value is undefined means it will return to 404 page. ng-Href directive Example  HTML:      <div ng-app="anchor">     <div ng-controller="anchorController">         <a ng-href="http://www.google.com" ng-click="show($event)">Anchor Tag</a>     </div>   </div> Javascript :  var anch = angular.module('anchor', []); anch.controller('anchorController',['$scope', '$window', function($scope, $window){     $scope.show = function(obj) {       $window.open(obj.target.href);     } }]); Result :  Demo

Group by select ng-options in angularjs

An angularjs ng-options have iterate the array or object based the number of  item available from the component. This item normally we use ng-options for key and value  previous   example . Now our requirement is need to Group feature from the selection option. Group By - This is the component of group list item or value added from the option label. value.category group by value.name for (key, value) in data The above format is write a (<optgroup>) select option UI <optgroup label="mobile"><option value="0">Moto,MicroMax,HTC,Apple</option></optgroup>  HTML <div ng-app="Opt"> <div ng-controller="OptCtrl"> <span>Name :</span> <span>   <select ng-options="value.category group by value.name for (key, value) in data" ng-model="yourItem"> <option value="">-- Select Country --</option> </select> <br>