突出显示所有在AngularJS中以编程方式改变的输入

Highlight all inputs that where programatically changed in AngularJS

本文关键字：编程 方式 改变 输入 AngularJS 显示      更新时间：2023-09-26

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

我想标记这个更改(闪烁输入的边界等)，以便用户可以看到哪些字段发生了变化。

我如何为表单中的所有输入做到这一点?(约50个输入)。

的例子:我有文本输入

  • X
    • Y
    • <
  • 区域/gh>
  • 。

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

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

您可以在$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;
}

享受吧!

相关文章：