Immediate and non-immediate model updates in AngularJS

26 / Jun / 2015 by Dhanendra Kumar 0 comments

In AngularJS, immediate model updates is a default behavior but if we want to persist value in the object after a certain time period has elapsed then we can achieve the same by using “debounce” object in “ng-model-options” directive, which is known as “non-immediate model updates”.

  1. Immediate Model updates

    <div ng-app="MyApp">
    	<input type="text" ng-model="message">
    	<p>
    		{{ message }}
    	</p>
    </div>
    

    In the example above the value of “message” immediately updates itself (default behavior of angularJS) on the change of value in the text box.

  2. Non-immediate model updates

    You can use “debounce” to delay the model update/validate with the “ng-model-options” directive.

    <div ng-app="MyApp">
    	<input type="text" ng-model="message" ng-model-options="{ debounce : 1000 }">
    	<p>
    		{{ message }}
    	</p>
    </div>
    

    In the example above we added a directive “ng-model-options” in the textbox and then a key “debounce” in it with value “1000” ms. So now it will wait for 1 sec before updating its value according to the text in the box.

    We can also set custom debounce for each event using an object in “debounce”.

    <div ng-app="MyApp">
    	<input type="text" ng-model="message" ng-model-options="{ updateOn: 'default blur', debounce : {default: 1000, blur: 0} }">
    	<p>
    		{{ message }}
    	</p>
    </div>
    

    In the example above value of “message” will update with a delay of 1 second from the change in the textbox or it will change immediately in case the textbox losses focus.

Hope this helps !!!

FOUND THIS USEFUL? SHARE IT

Leave a comment -