angularjs - 整个表单的类似 ngChange 的功能

Question

每当输入字段之一发生更改时，我想对整个表单执行相当于 ng-change 的操作。

我知道从 AngularJS 1.3 开始我就有了 debounce 选项，但它仅适用于单个输入。

我正在寻找适用于整个表单的“反跳”/“更改”功能。

Answer 1

没有内置的方法可以执行ng-change表格。

它甚至可能不需要，因为如果您正确组织 View 模型，那么您的表单输入可能会绑定(bind)到某个范围公开的属性:

$scope.formData = {};

在 View 中:

<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);

那么问题是，当然，这是一款深表，而且价格昂贵。此外，它不仅对表单中的更改使用react，还对 formData 中的更改使用react。来自任何来源。

因此，作为替代方案，您可以创建自己的指令来补充表单并对表单的更改事件使用react。

.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.