Angular 和 ng-repeat 指令

Question

我有来自网格的这段 HTML 代码。我需要根据分数值为每一行显示不同的颜色，好像它从 0 到 4 是绿色，从 5 到 7 是黄色，从 8 到 10 是红色。

我计划将“tableColor”变量更改为值：{success,warning,danger}，具体取决于分数。我只是不知道如何使用ng-repeat 指令来做到这一点

<tbody>
     <tr class="{{tableColor}}" ng-repeat="firm in device.firmwares">
             <td>{{firm.fileName}}</td>
             <td>{{firm.extracted}}</td>
             <td>{{firm.Score}}</td>
             <td>{{firm.date}}</td>
      </tr>
</tbody>

如果有人知道怎么做，我将不胜感激！

Answer 1

试试这个

<tbody>
     <tr ng-if="{{firm.Score <= 4}} " class="green" ng-repeat="firm in device.firmwares">
             <td>{{firm.fileName}}</td>
             <td>{{firm.extracted}}</td>
             <td>{{firm.Score}}</td>
             <td>{{firm.date}}</td>
      </tr>

     <tr ng-if="{{firm.Score >=5 & <=7 }} class="yellow" " ng-repeat="firm in device.firmwares">
             <td>{{firm.fileName}}</td>
             <td>{{firm.extracted}}</td>
             <td>{{firm.Score}}</td>
             <td>{{firm.date}}</td>
      </tr>

           <tr ng-if="{{firm.Score >=8 & <=10 }}" class="red" ng-repeat="firm in device.firmwares">
             <td>{{firm.fileName}}</td>
             <td>{{firm.extracted}}</td>
             <td>{{firm.Score}}</td>
             <td>{{firm.date}}</td>
      </tr>

</tbody>

对于 CSS：

.red { background-color: red; }
.yellow { background-color: yellow; }
.green{ background-color: green; }

Answer 2

你的代码很完美。您只需要更改类“tableColor”的值。请在您的 js 文件中执行以下代码：

$scope.score = 4 // any dynamic value you can set. i think you already have.
if($scope.score <= 4)
{
   $scope.tableColor = "classGreen";
}
else if($scope.score >= 5 && $scope.score <= 7)
{
   $scope.tableColor = "classYellow";
}
else if($scope.score >= 8 && $scope.score <= 10)
{
   $scope.tableColor = "classRed";
}

在 html 中，这个 {{tableColor}} 会影响它。

<tbody>
     <tr class="{{tableColor}}" ng-repeat="firm in device.firmwares">
             <td>{{firm.fileName}}</td>
             <td>{{firm.extracted}}</td>
             <td>{{firm.Score}}</td>
             <td>{{firm.date}}</td>
      </tr>
</tbody>

Answer 3

试试这个

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"amir","score":7},{"name":"amir","score":5},{"name":"asd","score":10},{"name":"jim","score":8},{"name":"babak","score":6},{"name":"vfrt","score":8},{"name":"cdsa","score":7},{"name":"amir","score":10},{"name":"majid","score":3}];
  
  
  });

.success{
  color:green;
  }

.warning{
   color:yellow;
  }

.danger{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <table>
     <tr ng-repeat="item in items" ng-class="{'success': item.score<= 4,'warning' :5<= item.score,'danger' : 8<=item.score }">
             <td>{{item.name}}</td>
             <td>{{item.score}}</td>
      </tr>
</table>
            
</div>