New in Angular 1.3: ng-model-options updateOn and debounce
Now in Angular 1.3 you can cause updates to your ngModels to only occur for a given even (blur, focus, click, etc);
Debouncing means that only 1 action will be registered within a specific time. This is handy for text inputs, where an action triggers a process (such as asynchronous search). ngModelOptions allows you to debounce your ngModel inputs in AngularJS apps.
[00:00] Angular 1.3 brings a new directive called "ng-model-options." You can see I have a form here, with an input, and that has an ng-model-options. That is pointing to an object I have on this view model, called "modelOptions," and that's right here.
[00:16] Let's go ahead and hide this HTML really quick. There are a couple of properties that go into ng-model-options, and I'm going to talk about two of those in this video. The first is updateOn, and that's a string.
[00:32] You can say, "Update on the default," and that will be the default behavior. Hello@gmail.com. It's just what we've all come to know and love. You can also have blur. Instead, you say, "hello@gmail.com," and then the model doesn't get updated until the input is blurred.
[00:54] You can put all kinds of event names in here. You can have keyup. You can have keydown. Where this comes in really handy is with the other thing that we want to talk about. Let's just switch this to the default.
[01:08] One other thing. You can have multiple event listeners in here as well. You have blur and default, separated by a space, and the model will be updated on both of those events.
[01:19] Now, if we add debounce...If you're familiar with the concept in general, you'll know that we're telling Angular to wait before doing something if that something is called over and over again.
[01:33] Basically, when we say "Debounce 500," that's saying, "Hey, Angular, don't update my model until 500 milliseconds after the last time I told you to update it." That allows us to do a lot of cool things.
[01:45] If we were doing asynchronous searching, we want to give the user some time to type what they're actually trying to type before we actually hit the server. Let's just see what this looks like, If I say, "kent@doddsfamily.us," boom. It doesn't get updated immediately.
[02:04] Where this comes in handy with updateOn is we add it as an object instead. Whoops. Now, the keys of this object are the events, and the values are how long we want the debounce to be for that event.
[02:19] If we say "Default to be 1500," as they're typing, we want these things to be updated every second and a half. Blur is zero. We don't want it to debounce on blur. Then you get this kind of effect.
[02:36] Let's say, "example@e.com." That was our default, and it updated after a second and a half. If I'm a user who knows what they're typing and moves on to the next input field, then I can say...Let's let that update..."example@e.com."
[02:58] Then I move onto the next. I blur, and that bound value gets updated immediately. This is very powerful for validation, for asynchronous operations, all kinds of things. This is definitely a feature that I will be using very frequently.
[03:15] All that you need to do is have this ng-model-options directive, give it an object with these keys on it, and you'll get that just baked in. This is something that you can still do with Angular 1.2, but it's really handy to have it built into the Angular core with 1.3
Your welcome Thomas! :D Thanks!
Question: This is pretty amazing. Is there a lesson connecting the dots with debounced model updates to posting data back to a server to save it?
No lesson like that. But you could just use this in combination with ng-change and that would work fine :-) For example: http://jsbin.com/loqego/edit
No lesson like that. But you could just use this in combination with ng-change and that would work fine :-) For example: http://jsbin.com/loqego/edit
Oh that is magic. I tip my hat to you good sir!
The debounce/blur features of ng-model-options is a wonderful surprise. Thank you for presenting this VERY, very useful technique for my ng toolkit of tricks.