javascript - 突出显示 AngularJS 中以编程方式更改的所有输入

Question

我有一个表单，其中包含用户可编辑的字段。其中一些在 $dirty 之前(由用户编辑)将自动更新为建议值。

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

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

示例: 我有文本输入

• X
• 是
• 面积
• 周长。

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

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

Answer 1

当 $dirty 为 $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;
}

享受吧!