Question

ngChange在值发生变化时触发（ngChange与经典的onChange事件不同）。如何将经典的onChange事件与angularjs绑定，只有在提交内容时才会触发？

当前绑定：

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

Answer 1

This post显示了一个指令示例，该指令将模型更改延迟到输入，直到blur事件触发。

Here是一个小提琴，显示ng-change使用新的ng-model-on-blur指令。请注意，这是对original fiddle的轻微调整。

如果将指令添加到代码中，则会将绑定更改为：

<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在下面的评论中提到的，此功能直接通过ngModelOptions支持Angular 1.3（目前处于测试阶段）。有关详细信息，请参阅the docs。

Answer 2

这是关于AngularJS的最新补充，作为未来的答案（也适用于another question）。

Angular更新版本（现在在1.3测试版中），AngularJS本身支持此选项，使用ngModelOptions，如

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptions docs

示例：

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Answer 3

如果其他人正在寻找额外的“输入”按键支持，则此处是fiddle提供的Gloppy的更新

按键绑定代码：

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

Answer 4

对于任何挣扎于IE8的人（它不喜欢unbind（'input'），我找到了解决方法。

将$ sniffer注入您的指令并使用：

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

如果你这样做，IE8会平静下来：）

Answer 5

根据我的知识，我们应该使用ng-change和select选项，在textbox的情况下，我们应该使用ng-blur。

Answer 6

是不是使用$ scope。$ watch更好地反映范围变量的变化？

Answer 7

覆盖默认输入onChange行为（仅调用该函数   当控制损失焦点和值发生变化时）

注意：ngChange与它触发的经典onChange事件不相似   值正在更改时的事件此伪指令存储该值   当它获得焦点时的元素   在模糊，它检查是否   新值已更改，如果是，则触发事件

@param {String} - “onChange”时要调用的函数名称   应该解雇

@example＆lt;输入my-on-change =“myFunc”ng-model =“model”＆gt;

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

Answer 8

我有完全相同的问题，这对我有用。添加java.util.List和ng-model-update，您就可以开始了！这是docs

ng-keyup

Angularjs：input [text] ngChange在值发生变化时触发

8 个答案: