javascript - 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; }