2016-10-11 15 views
0

配列の値の変更を確認したいと思います。古い値と新しい値を比較する変更があった場合、古い値が新しい値より大きい場合、要素に '赤'クラスが追加されます。新しい値の項目と古い値を比較する最も良い方法は何ですか?

各項目のコントローラ? これは、大規模なアレイでは非効率的です。

どのように最善の方法ですか?

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

 
    return { 
 
    \t 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>

+1

http://stackoverflow.com/questions/17417597/angularjs-watch-array-of-objects-for-data-change – Zach

+0

配列の値では機能しません。 –

答えて

0

私が見ることができる最善のことは(真の三番目のパラメータ)深い$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

関連する問題