Javascript 如何更改特定对象的背景色<；tr>；在AngularJS中使用ng repeat

如何为每行设置不同的背景色？ 例如：

第1行：蓝色

第2行：红色

第三排：绿色

main.js

test.html

{{name.fName}
{{name.lName}

以下是一个示例，带有角度：

模板：

<tr ng-repeat="name in names" ng-class="{greenyellow: $index === 1}">
    <td>{{name.fName}}</td>
    <td>{{name.lName}}</td>
</tr>

这将设置第二行的样式，因为

$index

是基于零的

---

如果您希望每行使用不同的颜色，可以使用ngStyle

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

并将每个添加到样式表中

.blue { background-color: blue }

---

下面的代码用于突出显示所选行

<tr ng-repeat="orderList in orderDetailList track by $index"   ng-style="{'background-color': colors[$index]}">

HTML

装船

我只想为特定行设置特定的背景色。如果我有一个10行的表格，我希望能够为数字为6的行设置一个背景色。这些颜色会有原因吗？你能把颜色绑定到名字吗？是什么决定了你想要的颜色，它的位置，或者…？你会考虑一些jQuery吗？你可以使用NG分类可以在小提琴中看到这个演示正在工作。但在我的项目中不是。我会仔细看看问题出在哪里。谢谢你的回答！问题出在图书馆。我的版本是1.0.4。更改为1.3.15，现在工作正常

1.0.4

是旧版本：）截至今天的最新稳定版本是

1.4.7

。确实欢迎升级！在

ng repeat

的上下文中，有一些：

$index

等于当前行的索引，但也有

$first

或

$last

，如果当前行是第一行（分别是最后一行），则等于true，否则等于false。例如：

ng class=“{green:$first，blue:$index==2 |$last}”

将为第一行添加

绿色

类。蓝色的

类将用于第三行，也是最后一行。希望清楚。谢谢你的回答！但是如果我想要多行的颜色相同呢。比如说第一排和最后一排。我必须使用$scope.colors=[“蓝色”，“蓝色”]？我认为一定有一种不同的方法来解决这个问题。@ElviraEmm那么Michael的方法可能更好，使用$first和$last索引方法。
<tr ng-repeat="name in names" ng-style="{'background-color': colors[$index]}">

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

.blue { background-color: blue }

<tr ng-repeat="orderList in orderDetailList track by $index"   ng-style="{'background-color': colors[$index]}">

app.controller("OrderListController",function($scope){
    $scope.colors=[];
    /* call the below function on ng-click
    $scope.addtoship = function(){
        $scope.colors.push(['pink']);
    }
}    

<td>
    <button type="button" data-ng-click="addtoship()"> Add to Ship </button>
</td>