Angularjs: input[text] ngChange fires while the value is changing

by

This post shows an example of a directive that delays the model changes to an input until the blur event fires.

Here is a fiddle that shows the ng-change working with the new ng-model-on-blur directive. Note this is a slight tweak to the original fiddle.

If you add the directive to your code you would change your binding to this:

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

Here is the directive:

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

Note: as @wjin mentions in the comments below this feature is supported directly in Angular 1.3 (currently in beta) via ngModelOptions. See the docs for more info.

More Related Contents:

  1. angular.service vs angular.factory
  2. How to add custom validation to an AngularJS form?
  3. How do you prevent duplicate user properties in Firebase?
  4. What is the difference between ng-if and ng-show/ng-hide
  5. Link vs compile vs controller
  6. Angular.js directive dynamic templateURL
  7. Using protractor with loops
  8. Angularjs $q.all
  9. passing 2 $index values within nested ng-repeat
  10. Should I use `this` or `$scope`?
  11. AngularJS $http, CORS and http authentication
  12. getting the ng-object selected with ng-change
  13. AngularJS : Custom filters and ng-repeat
  14. inline conditionals in angular.js
  15. How can I test an AngularJS service from the console?
  16. Angularjs ui-router. How to redirect to login page
  17. localStorage vs sessionStorage vs cookies
  18. Send multipart/form-data files with angular using $http
  19. Getting MathJax to update after changes to AngularJS model
  20. ng-options with disabled rows
  21. How/when to use ng-click to call a route?
  22. What’s the best way to cancel event propagation between nested ng-click calls?
  23. Call Angular Function with Jquery
  24. Multiple Module in Angularjs
  25. AngularJS – why is $apply required to properly resolve a $q promise?
  26. WebAPI CORS with Windows Authentication – allow Anonymous OPTIONS request
  27. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  28. How to use the axios library with AngularJS
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment