<!DOCTYPE html> <html ng-app="app"> <head lang="en" > <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>AngularJS 1.3 ng-model-options</title> </head> <body ng-controller="MainCtrl as vm"> <form name="myForm" novalidate> <label> Some input: <input type="text" name="myField" ng-model="vm.inputValue" ng-model-options="vm.modelOptions" required /> </label> <button type="submit">Submit</button> </form> Bound value: <span ng-bind="vm.inputValue"></span> <br /> Field Error State: <pre>{{myForm.myField.$error | json}}</pre> <br /> Form Error State: <pre>{{myForm.$error | json}}</pre> myForm.$submitted: {{myForm.$submitted}} <script src="bower_components/angular/angular.min.js"></script> <script src="app.js"></script> </body> </html>
/** * Created by Answer1215 on 11/13/2014. */ function MainCtrl(){ var vm = this; vm.inputValue = ""; vm.modelOptions = { updateOn: 'default blur', debounce: { default: 1200, //for search we don't want to update server during user type blur: 0 //when user move on to the next field, we update immedately } }; } angular .module('app', []) .controller('MainCtrl', MainCtrl);
Read More: https://egghead.io/lessons/angularjs-new-in-angular-1-3-ng-model-options-updateon-and-debounce