在angularjs中比较旧值与新值项ng-repeat的最佳方法是什么答案

【问题标题】：What is best way to compare old value with new value items ng-repeat in angularjs在angularjs中比较旧值与新值项ng-repeat的最佳方法是什么
【发布时间】：2017-02-20 01:20:05
【问题描述】：

我想查看数组中值的变化，如果发生变化，将旧值与新值进行比较，如果旧值大于新值，则将“红色”类添加到元素。

每个项目的控制器？这在大型数组中可能效率低下。

最好的方法是什么？

var app = angular.module('myApp',[])
app.controller('myCtrl', function($scope,DataFactory) {
  $scope.items = DataFactory.data;}));
});
app.factory('DataFactory', function($interval){
	var data = [
    { 'value' : 1 },
    { 'value' : 2 },
    { 'value' : 3 },
    { 'value' : 4 },
    { 'value' : 5 },
    { 'value' : 6 }
  ];
  var i = 0;
  $interval(function(){
  	i++;
    data[3].value = i;
  },2000);

  return {
  	data : data
  }
});

.block {
  width: 50px;
  height: 50px;
  background: #ccc;
  text-align: center;
  padding-top:10px;
}
.gren {
  background: green;
}
.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="item in items" class="block">
      {{item.value}}
    </div>
  </div>
</body>

【问题讨论】：

stackoverflow.com/questions/17417597/…
它不适用于数组中的值。

标签： angularjs

【解决方案1】：

我能看到的最好的事情是对数组做一个深度$watch（第三个参数为真），然后循环抛出新旧数组，看看哪个发生了变化。

$scope.$watch('items', function(newValue, oldValue) {
  var count = newValue.length > oldValue.length ? oldValue.length : newValue.length;
  for(var i = 0; i < count; i++) {
    if(newValue[i].value != oldValue[i].value) {
      // logic here
      if(newValue[i].value < oldValue[i].value) {
        // new value is less
        newValue[i].less = true;
      }
      else {
        // new value is greater
        newValue[i].less = false;
      }
    }
    else {
      // It didn't change
    }
  }
}, true);

这是标记：

<div ng-repeat="item in items" class="block" ng-class="{red: item.less}">
  {{item.value}}
</div>

http://plnkr.co/edit/IhQSeXDTfcjww2oLTJCk?p=preview

【讨论】：