Question

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

controller.js

function checkForUpdatedIndices(){
  dataService.getIndices().then(function(res){
    $scope.recentIndeces = res.data;        
 });}

 var indicesTimer = setInterval(checkForUpdatedIndices,2000);
 checkForUpdatedIndices();

我的HTML：

<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)
}

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

1 个答案: