92

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

当前绑定：

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

8 回答 8

99

这篇文章展示了一个指令示例，该指令延迟模型对输入的更改，直到触发模糊事件。

这是一个小提琴，它显示了 ng-change 与新的 ng-model-on-blur 指令一起使用。请注意，这是对原始 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 在下面的评论中提到的那样，Angular 1.3（目前处于测试阶段）通过ngModelOptions. 有关更多信息，请参阅文档。

于 2012-08-08T17:55:14.300 回答
33

这是关于 AngularJS 的最新添加，作为未来的答案（也适用于另一个问题）。

Angular 较新的版本（现在是 1.3 beta），AngularJS 原生支持这个选项，使用ngModelOptions, 像

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

NgModelOptions 文档

例子：

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />
于 2014-04-13T16:59:54.460 回答
8

如果其他人在寻找额外的“输入”按键支持，这里是Gloppy提供的小提琴的更新

按键绑定代码：

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});
于 2012-10-20T03:47:06.107 回答
5

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

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

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

如果你这样做，IE8 会平静下来 :)

于 2013-01-02T04:29:05.020 回答
4

据我所知，我们应该使用带有选择选项的 ng-change，在文本框的情况下我们应该使用 ng-blur。

于 2015-03-13T12:15:30.633 回答
3

使用 $scope.$watch 不是更好地反映作用域变量的变化吗？

于 2014-01-14T09:58:49.763 回答
0

覆盖默认输入 onChange 行为（仅在控制丢失焦点和值发生更改时调用该函数）

注意：ngChange 与经典的 onChange 事件不同，它在值发生变化时触发事件 该指令在获得焦点时存储元素的值
On blurs 它检查新值是否已更改，如果是，则触发事件

@param {String} - 触发“onChange”时要调用的函数名

@example < 输入 my-on-change="myFunc" ng-model="model">

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();
                    }
                }
            });
        }
    };
});
于 2013-12-25T11:49:15.340 回答
0

我遇到了完全相同的问题，这对我有用。添加ng-model-update和ng-keyup，您就可以开始了！这是文档

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />
于 2017-03-22T16:16:04.027 回答