只要其中一个输入字段发生变化,我想对整个表单做一个等同的更改。
我知道从AngularJS 1.3起,我有去抖动选项,但它只适用于单个输入。
我正在寻找一个适用于整个表单的“去抖动”/“改变”功能。
没有内置的方式来更改表单。
原文链接:https://www.f2er.com/angularjs/144782.html它可能甚至不需要,因为如果您正确组织视图模型,那么您的表单输入可能会绑定到某个范围暴露的属性:
$scope.formData = {};
并在视图中:
<form name="form1"> <input ng-model="formData.a"> <input ng-model="formData.b"> </form>
然后,您可以深入观察(使用$ watch)进行模型更改(并对您需要的元素应用任何去抖动选项):
$scope.$watch("formData",function(){ console.log("something has changed"); },true);
那么问题当然是这是一个深刻的手表,它是昂贵的。此外,它不仅对Form中的更改做出反应,还对来自任何来源的formData进行更改。
所以,作为一种替代方案,您可以创建自己的指令来表达形式并对表单的更改事件作出反应。
.directive("formOnChange",function($parse){ return { require: "form",link: function(scope,element,attrs){ var cb = $parse(attrs.formOnChange); element.on("change",function(){ cb(scope); }); } } });
用法是:
<form name="form1" form-on-change="doSomething()"> <input ng-model="formData.a"> <input ng-model="formData.b"> </form>
plunker用于说明。
请注意,根据jQuery documentation:,“更改”事件仅在文本输入的模糊时触发
The
change
event is sent to an element when its value changes. This event is limited to<input>
elements,<textarea>
Boxes and<select>
elements. For select Boxes,checkBoxes,and radio buttons,the event is fired immediately when the user makes a selection with the mouse,but for the other element types the event is deferred until the element loses focus.