AngularJS 1.3 – 整个表单的“更改类”功能

前端之家收集整理的这篇文章主要介绍了AngularJS 1.3 – 整个表单的“更改类”功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
只要其中一个输入字段发生变化,我想对整个表单做一个等同的更改。

我知道从AngularJS 1.3起,我有去抖动选项,但它只适用于单个输入。

我正在寻找一个适用于整个表单的“去抖动”/“改变”功能

没有内置的方式来更改表单。

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

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

原文链接:https://www.f2er.com/angularjs/144782.html

猜你在找的Angularjs相关文章