How to let ng-model not update immediately?

angularjs, binding

Solution

Update

As many have mentioned Angular now has built-in support for this using the `ng-model-options` directive. See more here.

<input type="text" ng-model="name" ng-model-options="{updateOn: 'blur'}" />

Old answer below:

There's no built-in option for ng-model to change that behaviour, but you can write a custom directive doing it. @Gloopy wrote a directive like that for another question. You can look at the fiddle here.

The directive unregisters from the `input` and `keydown` events which trigger the update after each keystroke.

<input type="text" ng-model="name" ng-model-onblur />

Update:

Updated fiddle to use latest stable AngularJS (1.2.16 as of writing), instead of directly referencing the master version at github.

Also added an explicit priority so that the directive is run after `ng-model` to ensure event listeners are changed correctly.

Problem

Code: ``` <input type="text" ng-modal="name" /> {{name}} ``` When I input something into the `input`, the following `{{name}}` will change immediately. Is it able to configure it only update the `name` after I input all characters and leave the input?

Original source

Related problems