ng-model-options
is a directive that was introduced with angular 1.3. It is really helpful when for example you're working with form inputs that has one or several watchers bound to them. Say for example you have a text input that fires a request to a search engine when the model is updated.
Simply binding the model to an input and triggering the $http
when the $watch
callback is fired is one way to go. But that means that the request will be fired for every letter you type. Not very efficient.
Using the debounce
option you can specify a delay after which the change of the model will occur, if another change occurs before the debounce timer finishes, it resets. Below is an example of using debounce vs just binding an input to update a model:
See the Pen pJMPod by Erik Svedin (@svdn) on CodePen.
Another feature with ng-model-options
is the updateOn
option. It lets you specifiy when your model will be updated. Possible options are DOM events such as blur
or mouseover
, but also default
which as you guessed is the default behaviour. This is also a great tool for controlling when your models should be updated, rather than running a ton of watch callbacks for every keystroke.
See the updateOn:'blur'
in action below: