javascript - 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

Question

如何为每一行设置不同的背景颜色？例如:

第一行:蓝色

第 2 行:红色

第 3 行:绿色

main.js

$scope.names = [
        {fName: "John", lName: "David"},
        {fName: "Richard", lName: "Daniel"},
        {fName: "Paul", lName: "Mark"}
        ];

test.html

<table class="table table-bordered">
  <tbody><tr ng-repeat="name in names">
    <td>{{name.fName}}</td>
    <td>{{name.lName}}</td>
  </tr></tbody>
</table>

Answer 1

如果你想为每一行使用不同的颜色，你可以使用 ngStyle

<tr ng-repeat="name in names" ng-style="{'background-color': colors[$index]}">

你的 Controller 声明 $scope.colors = ['blue','red', 'green']

或

<tr ng-repeat="name in names" ng-class="colors[$index]">

并将每个添加到您的样式表中

.blue { background-color: blue }