如何改变背景颜色为特定＆LT; TR＆GT;在AngularJS采用NG-重复 [英] How to change background color for a specific <tr> in AngularJS using ng-repeat

问题描述

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

ROW1：蓝色

ROW2：红色

ROW3：绿色

  

main.js

  $ scope.names = [
        {FNAME：约翰，LNAME：大卫}，
        {FNAME：理查德，LNAME：丹尼尔}，
        {FNAME：保罗，LNAME：马克}
        ];
 

  

的test.html

 ＆LT;表类=表表镶上＆GT;
  ＆LT;＆TBODY GT;＆LT; TR NG重复=名称中的名称＆GT;
    ＆所述; TD＆GT; {{name.fName}}＆下; / TD＆GT;
    ＆所述; TD＆GT; {{name.lName}}＆下; / TD＆GT;
  ＆LT; / TR＆GT;＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

解决方案

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

 ＆LT; TR NG重复=名字的名字吴式={背景色：颜色[$指数]}＆GT;
 

在您的控制器状态 $ scope.colors = ['蓝'，'红'，'绿']

或

 ＆LT; TR NG重复=名字的名字NG-CLASS =的色彩[$指数]＆GT;
 

和每个添加到您的样式表

 的.blue {背景颜色：蓝}
 

How can I set a different background color for every row? For exemple:

row1: blue

row2: red

row3: green

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>

解决方案

If you would like a different color for each row you could use ngStyle

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

where your controller states $scope.colors = ['blue','red', 'green']

or

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

and add each to your style sheet

.blue { background-color: blue }

这篇关于如何改变背景颜色为特定＆LT; TR＆GT;在AngularJS采用NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！