javascript - How to change background color for a specific <tr> in AngularJS using ng-repeat - Stack Overflow

admin管理员组

文章数量:1278787

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>

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>

• javascript
• html
• css
• angularjs

Share Improve this question Follow asked Oct 20, 2015 at 20:52 Elvira EmmElvira Emm 6011 gold badge11 silver badge1010 bronze badges 12

• I just want to set a specific background color for a specific row. If i have a table with 10 rows i want to be able to set a background color for the row with number 6 for example. – Elvira Emm Commented Oct 20, 2015 at 20:56
• Will there be a ryhme or reason to the colors? Can you bind the color to the name? – hungerstar Commented Oct 20, 2015 at 20:57
• what determines the row you want to color, its position, or ..? – TimCodes Commented Oct 20, 2015 at 20:57
• Would you consider some jQuery? – An0nC0d3r Commented Oct 20, 2015 at 20:58
• 1 you could use ng-class – TimCodes Commented Oct 20, 2015 at 21:00

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 5

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 }

Here is an example, with angular:

Template:

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

CSS

.greenyellow {
    background-color: greenyellow;
}

This will style the second row as $index is zero-based.

demo fiddle

Below code is used to highlight the selected row .

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

Declare in the controller

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

HTML

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

本文标签： javascriptHow to change background color for a specific lttrgt in AngularJS using ngrepeatStack Overflow