{"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":8},"categories":[1439,3429],"tags":[3955,955,4697,1857,1859,1858,1860],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20854"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=20854"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20854\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=20854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=20854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=20854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}