0

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

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

我如何对表单中的所有输入执行此操作？（大约 50 个输入）。

示例：我有文本输入

  • X
  • 是
  • 区域
  • 周长。

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

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

4

1 回答 1

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

享受！

于 2015-10-09T20:05:29.943 回答