Question

有没有办法直观地显示何时以编程方式更改范围输入值？

我有几个输入字段绑定到各种ng-model值，这些值在用户控件之外更改。（为简单起见，此更改与下面示例中的按钮相关联。）

当值发生变化时，我希望输入改变颜色或显示某种视觉提示，以显示该值与一秒前的值不同。如果只有一个字段，可以使用手表并在相关输入中添加一些CSS。但是，在生产中有数百个值，我们没有在哪些输入中显示哪些值的映射，即使我们这样做，许多输入也是由中继器生成的，所以手工编码无数的手表就出来了。

我希望有类似jQuery高亮效果（http://api.jqueryui.com/highlight-effect/）的东西，但在这一点上，我会对任何视觉变化感兴趣，看看我能否让它能够满足我的需要。< / p>

示例小提琴：http://jsfiddle.net/cdnaa8ew/1/

angular.module('changeSample', [])
  .controller('SampleController', ['$scope',
    function($scope) {
      $scope.a = 1;
      $scope.b = 2;
      $scope.c = 3;
      $scope.d = 4;
      $scope.e = 5;

      $scope.change = function() {
        var rand = Math.floor(Math.random() * 5);
        if (rand == 0) {
          $scope.a = $scope.a + 1;
        }
        if (rand == 1) {
          $scope.b = $scope.b + 1;
        }
        if (rand == 2) {
          $scope.c = $scope.c + 1;
        }
        if (rand == 3) {
          $scope.d = $scope.d + 1;
        }
        if (rand == 4) {
          $scope.e = $scope.e + 1;
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<body ng-app="changeSample">
  <form ng-controller="SampleController">
    <input type="text" ng-model="a" />
    <br/>
    <input type="text" ng-model="b" />
    <br/>
    <input type="text" ng-model="c" />
    <br/>
    <input type="text" ng-model="d" />
    <br/>
    <input type="text" ng-model="e" />
    <br/><span>{{a}}{{b}}{{c}}{{d}}{{e}}</span>

    <br/>
    <button ng-click="change()">Change</button>
  </form>
</body>

Answer 1

您可以为将要更改的元素添加类的指令创建一个简单的指令。例如：

.directive('highlight', function($timeout) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs) {
            var className = attrs.highlight || 'highlight';
            scope.$watch(attrs.ngModel, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.addClass(className);
                    $timeout(function() {
                        element.removeClass(className);
                    }, 400);
                }
            });
        }
    };
});

并像这样使用它：

<input type="text" ng-model="c" highlight />
<input type="text" ng-model="d" highlight="highlight-red" />

然后你可以使用CSS定义想要的任何高亮风格：

.highlight-red {
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
    background: #FE94B3;
}

演示：http://jsfiddle.net/cdnaa8ew/3/

Answer 2

角度动画可以绑定到许多事件，例如ng-show和ng-repeat。 https://docs.angularjs.org/api/ngAnimate/service/ $动画

这将允许您复制jquery高亮效果。另外，请查看以下相关问题：ng-animate : Animation when model changes

以编程方式显示角度范围更改

2 个答案:

演示：http://jsfiddle.net/cdnaa8ew/3/