ngChange在值发生变化时触发(ngChange与经典的onChange事件不同)。如何将经典的onChange事件与angularjs绑定,只有在提交内容时才会触发?
当前绑定:
<input type="text" ng-model="name" ng-change="update()" />
答案 0 :(得分:96)
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。
答案 1 :(得分:32)
这是关于AngularJS的最新补充,作为未来的答案(也适用于another question)。
Angular更新版本(现在在1.3测试版中),AngularJS本身支持此选项,使用ngModelOptions
,如
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
示例:
<input type="text" name="username"
ng-model="user.name"
ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />
答案 2 :(得分:8)
如果其他人正在寻找额外的“输入”按键支持,则此处是fiddle提供的Gloppy的更新
按键绑定代码:
elm.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
}
});
答案 3 :(得分:5)
对于任何挣扎于IE8的人(它不喜欢unbind('input'),我找到了解决方法。
将$ sniffer注入您的指令并使用:
if($sniffer.hasEvent('input')){
elm.unbind('input');
}
如果你这样做,IE8会平静下来:)
答案 4 :(得分:4)
根据我的知识,我们应该使用ng-change和select选项,在textbox的情况下,我们应该使用ng-blur。
答案 5 :(得分:3)
是不是使用$ scope。$ watch更好地反映范围变量的变化?
答案 6 :(得分:0)
覆盖默认输入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();
}
}
});
}
};
});
答案 7 :(得分:0)
我有完全相同的问题,这对我有用。添加java.util.List
和ng-model-update
,您就可以开始了!这是docs
ng-keyup