整个表单的类似ngChange的功能

Question

ng-change每当输入字段之一发生更改时，我都希望对整个表单进行等效操作。

我知道自AngularJS 1.3起我就有了去抖选项，但它仅适用于单个输入。

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

Answer 1

ng-change表单没有内置的方法。

甚至可能不需要它，因为如果您正确组织了视图模型，那么表单输入很可能会绑定到某个范围暴露的属性：

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

然后 ，当然， 问题在于
，这是一部精打细算的手表，而且价格昂贵。而且，它不仅对表单的更改做出反应，而且还对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>

插图的矮子。

请注意，根据jQuery文档，仅在文本输入模糊时才触发“更改”事件：

当change事件的值更改时，该事件将发送到该元素。此事件仅限于<input>元素，<textarea>框和<select>元素。对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但是对于其他元素类型，该事件将推迟到该元素失去焦点之前。