如何每秒自动更新 ng-repeat 集合中的 html 元素

Question

在我的控制器中，我有一个函数，每 2 秒($interval(从 API 接收一次数据。此数据将呈现并显示给用户。当我从 API 获得正数时，我想将 HTML 中的背景颜色设置为绿色 1 秒，然后将其恢复为原始颜色。如果为负数，请将背景颜色设置为红色 1 秒，依此类推...

控制器.js

function checkForUpdatedIndices(){
  dataService.getIndices().then(function(res){
    $scope.recentIndeces = res.data;        
 });}
 var indicesTimer = setInterval(checkForUpdatedIndices,2000);
 checkForUpdatedIndices();

我的网页：

<ul id="ctr_indices">
        <li class="cl_indeces" ng-repeat="i in recentIndeces track by $index">
            <span class="itemname">{{i.itemName}}</span>
            <span class="itemlastvalue">{{i.itemLastValue}}</span>
            <span class="itemchange">{{i.itemChange}}</span>
            <span class="itempercentage">{{i.itemPercentageChange}}</span>
        </li>
 </ul>

当 i.itemLastValue 包含"+"时，我希望看到它为绿色 1 秒钟，然后将其更改回原始颜色。提前致谢

Answer 1

您可以使用

ng-style指令执行此操作。

ng-style="{'background-color' : i.color}"

并在ng-init内调用一个函数并将该项作为参数传递

<span class="itemlastvalue" ng-style="{'background-color' : i.color}" ng-init="setColor(i)">{{i.itemLastValue}}</span>

在函数中根据条件分配颜色timeout并使用函数将其反转为原始值

$scope.setColor = function(i){
    if( i.itemLastValue == "+"){
      i.color = 'green'
    }
    else if( i.itemLastValue == "-"){
      i.color = 'red'
    }
    $timeout(function(){
       i.color = "white" // what ever the original value 
    },1000)
}

更新

第二种情况是删除 ng-init 函数并在 checkForUpdatedIndices 中调用该函数

function checkForUpdatedIndices(){
  dataService.getIndices().then(function(res){
    $scope.recentIndeces = res.data; 
    setColor()       
 });
}
function setColor(){
   var backUp = angular.copy($scope.recentIndeces);
   for(var i=0; i<= $scope.recentIndeces.length-1; i++){
      if( $scope.recentIndeces[i].itemLastValue == "+"){
        $scope.recentIndeces[i].color = 'green'
      }
      else if( $scope.recentIndeces[i].itemLastValue == "-"){
        $scope.recentIndeces[i].color = 'red'
      }
   }
   $timeout(function(){
      $scope.recentIndeces =  angular.copy(backUp);
   },1000)
}