Immediate and non-immediate model updates in AngularJS
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”.
-
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.
-
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 !!!
good