{"id":20854,"date":"2015-06-26T11:55:48","date_gmt":"2015-06-26T06:25:48","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=20854"},"modified":"2017-08-03T13:19:58","modified_gmt":"2017-08-03T07:49:58","slug":"immediate-and-non-immediate-model-updates-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/immediate-and-non-immediate-model-updates-in-angularjs\/","title":{"rendered":"Immediate and non-immediate model updates in AngularJS"},"content":{"rendered":"

In AngularJS<\/a>, 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”<\/a> directive, which is known as “non-immediate model updates”.<\/p>\n

    \n
  1. \n

    Immediate Model updates<\/h3>\n

    [html]
    \n<div ng-app="MyApp">
    \n\t<input type="text" ng-model="message">
    \n\t<p>
    \n\t\t{{ message }}
    \n\t<\/p>
    \n<\/div>
    \n[\/html]<\/p>\n

    In the example above the value of “message” immediately updates itself (default behavior of AngularJS<\/a>) on the change of value in the text box.<\/li>\n

  2. \n

    Non-immediate model updates<\/h3>\n

    You can use “debounce” to delay the model update\/validate with the “ng-model-options” directive.<\/p>\n

    [html]
    \n<div ng-app="MyApp">
    \n\t<input type="text" ng-model="message" ng-model-options="{ debounce : 1000 }">
    \n\t<p>
    \n\t\t{{ message }}
    \n\t<\/p>
    \n<\/div>
    \n[\/html]<\/p>\n

    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.<\/p>\n

    We can also set custom debounce for each event using an object in “debounce”.<\/p>\n

    [html]
    \n<div ng-app="MyApp">
    \n\t<input type="text" ng-model="message" ng-model-options="{ updateOn: ‘default blur’, debounce : {default: 1000, blur: 0} }">
    \n\t<p>
    \n\t\t{{ message }}
    \n\t<\/p>
    \n<\/div>
    \n[\/html]<\/p>\n

    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.<\/li>\n<\/ol>\n

    Hope this helps !!!<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 [html] <div ng-app="MyApp"> <input type="text" ng-model="message"> […]<\/p>\n","protected":false},"author":103,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":13,"footnotes":""},"categories":[1439,3429],"tags":[3955,955,4697,1857,1859,1858,1860],"class_list":["post-20854","post","type-post","status-publish","format-standard","hentry","category-angular","category-front-end-development","tag-angular-development","tag-angularjs","tag-angularjs-development-company","tag-immediate","tag-model","tag-non-immediate","tag-updates"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t