Alan Alan - 7 days ago 7
AngularJS Question

How can I delay a change to my model until I finish typing?

I have this field:

<input ng-model="phs.englishRange"
style="width:6rem;"
type="text" />


The word is used in a filter so when I make any changes to it the filter changes while the changes are being made. Is there a way I can delay this to the model changes 1 second after I stop typing?

Answer

For your use-case, to trigger model update 1s after last character typed (model update timer will be reset each time):

ng-model-options="{ updateOn: 'default', debounce: {'default': 1000} }"

More options - update on blur:

ng-model-options="{ updateOn: 'blur' }"  

Options are "default" (as you type) and/or "blur" (when you leave the input).

You can also use debounce inside model-options to control how fast to issue the model update.

debounce: { 'default': 500, 'blur': 0 }

More on ng-model-options

Comments