AngularJS 1.3 - `整个形式NG-change`一样的功能 [英] AngularJS 1.3 - `ng-change`-like functionality for the entire form

问题描述

我愿做 NG-变化的等效每当有在其输入字段中的一个改变整个表单。

I would like to do an equivalent of ng-change for the entire form whenever there is a change in one of its input fields.

我知道自从AngularJS 1.3我有防抖动选项，但只适用于单个输入。

I know that since AngularJS 1.3 I have the debounce option but it applies only for a single input.

我在找关于变更功能的反跳/，这将适用于整个表单。

I'm looking for a "debounce"/"on change" functionality that will apply for the entire form.

推荐答案

有没有一个内置的方式做 NG-变化的形式。

There isn't a built-in way to do ng-change for a form.

它甚至有可能不会是必要的，因为如果你正确地组织你的视​​图模型，那么你的表单输入有可能势必在一定范围暴露的属性：

It may not even be needed, because if you organized your view model properly, then your form inputs are likely bound to a certain scope-exposed property:

$scope.formData = {};

和在视图：

<form name="form1">
  <input ng-model="formData.a">
  <input ng-model="formData.b">
</form>

然后，你可以深刻的手表（带 $观看）的模型更改（和运用，你需要什么元素防抖动选项）：

Then you could deep-watch (with $watch) for model changes (and apply whatever debounce option on elements that you need):

$scope.$watch("formData", function(){
  console.log("something has changed");
}, true);

那么问题是，当然，这是一个深刻的手表，它是昂贵的。此外，它的反应不仅在形式的变化，也从任何来源 FORMDATA 的变化。

Then problem is, of course, that this is a deep-watch and it is expensive. Also, it reacts not only to changes in the Form, but also to a change in formData from any source.

所以，作为替代，你可以创建自己的指令恭维的形式和反应生成的更改事件。

So, as an alternative, you could create your own directive to compliment the form and react to form's change events.

.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的文档：

Note, that the "change" event is fired only on blur for a text input, as per jQuery documentation:

的更改事件被发送到一个元素时，它的价值变化。本次活动仅限于＆LT;输入＆GT; 元素，＆LT; textarea的＆GT; 箱和＆LT ;选择＆GT; 元素。对于选择框，复选框，单选按钮，在事件被触发立即当用户用鼠标选择，但对于其他元素类型的事件被推迟到元素失去焦点。

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.

这篇关于AngularJS 1.3 - `整个形式NG-change`一样的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！