一尘不染

AngularJS:input [text] ngChange在值更改时触发

angularjs

值更改时会触发ngChange(ngChange与经典的onChange事件不相似)。如何将经典的onChange事件与angularjs绑定在一起,只有在提交内容时才会触发?

当前绑定:

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

阅读 309

收藏
2020-07-04

共1个答案

一尘不染

这篇文章显示了一个指令示例,该指令将模型对输入的更改延迟到模糊事件触发之前。

是一个小提琴,显示了ng-change与新的ng-model-on-
blur指令一起使用。请注意,这是对原始提琴的略微调整。

如果将指令添加到代码中,则将绑定更改为:

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

这是指令:

// 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());
                });         
            });
        }
    };
});

注意:正如@wjin在下面的注释中提到的,此功能在Angular1.3(当前为beta)中通过受到直接支持ngModelOptions。有关更多信息,请参阅文档

2020-07-04