Question

我的表单中包含可由用户编辑的字段。其中一些，直到它们是脏的（由用户编辑）将自动更新建议值。

我想标记此更改（闪烁输入边框等），以便用户可以看到哪些字段已更改。

如何为表单中的所有输入执行此操作？（约50项投入）。

实施例：我有文字输入

X
ý
区
周长。

用户通常会输入X和Y的值。我在这些字段上有$ watch会调用一个Web服务（/ calculate？x = 3＆amp; y = 2），它将返回{perimeter：12;面积：6}。这些值在“区域”和“周界”输入中自动完成。发生这种情况时，我想在这些字段中添加一个CSS类，以便用户知道它们在哪里自动更新。

我知道我可以在$ watch中添加CSS类但我有多个观察者，我不想将这个逻辑添加到已经复杂的表单中。我的想法在哪里有一个“onchange”，适用于以编程方式更改的输入，可以应用于许多输入（表单上的指令，或输入或观察者的指令，但在表单字段，而不是模型）。

Answer 1

当$ dirty时，您可以将css类应用于输入字段：

HTML：

<form name="myForm">
    ...
    ...    
    <input name="fieldName" type="text" ng-model="object.name" ng-class="{'dirty-field': myForm.fieldName.$dirty}">
    ...
    ...
</form>

CSS：

.dirty-field{
  border: 1px solid yellow;
}

<强>更新

好的，你可以使用这样的指令来检查每个输入的值是否改变了：

指令：

.directive('changedField', function(){
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl){

        var originalValue;

        scope.$watch(function(){ 
          return ctrl.$modelValue; 
        }, function(value){
          originalValue = !originalValue ? value : originalValue;
          element.toggleClass('changed-field', originalValue !== value);
        });

      }
  };  
})

HTML：

<input changed-field name="fieldName" type="text" ng-model="object.name">

CSS：

.changed-field{
  border: 1px solid yellow;
}

享受！

突出显示AngularJS

1 个答案: