Will & Skill Developers

Will & Skill Developers


Thoughts, snippets and ideas from the team at Will & Skill AB, Stockholm.

Erik Svedin
Author

Share


Angular tips & tricks: ng-model-options

Erik SvedinErik Svedin

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:

See the Pen eNqWRP by Erik Svedin (@svdn) on CodePen.

Erik Svedin
Author

Erik Svedin

Comments