Как изменить цвет фона для определенного ‹tr› в AngularJS с помощью ng-repeat

Как я могу установить другой цвет фона для каждой строки? Например:

ряд 1: синий

ряд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>

javascript html css angularjs
person Elvira Emm    schedule 20.10.2015    source источник
comment
Я просто хочу установить определенный цвет фона для определенной строки. Если у меня есть таблица с 10 строками, я хочу, например, установить цвет фона для строки с номером 6.   -  person Elvira Emm    schedule 20.10.2015
comment
Будет ли рифма или причина для цветов? Можно ли привязать цвет к названию?   -  person hungerstar    schedule 20.10.2015
comment
что определяет строку, которую вы хотите раскрасить, ее положение или ..?   -  person TimCodes    schedule 20.10.2015
comment
Не могли бы вы рассмотреть какой-нибудь jQuery?   -  person An0nC0d3r    schedule 20.10.2015
comment
Я хотел бы сделать это в Angular, если это возможно.   -  person Elvira Emm    schedule 20.10.2015
comment
вы можете использовать ng-класс   -  person TimCodes    schedule 21.10.2015
comment
но какое условие определяет строку для изменения цвета фона? например, это третья строка в таблице или строка, где fname = roger. что такое флаг   -  person TimCodes    schedule 21.10.2015
comment
Если это третья строка в таблице, я хочу, чтобы цвет фона был другим.   -  person Elvira Emm    schedule 21.10.2015
comment
см. ответ от @Michael, просто измените 1 на три   -  person TimCodes    schedule 21.10.2015
comment
С ng-class и $index этого легко добиться.   -  person Michael P. Bazos    schedule 21.10.2015
comment
@TimCodes Почти индекс третьей строки равен 2;)   -  person Michael P. Bazos    schedule 21.10.2015
comment
@Майкл, лол, хороший улов   -  person TimCodes    schedule 21.10.2015

Ответы (3)


arrow_upward
4
arrow_downward

Если вам нужен другой цвет для каждой строки, вы можете использовать ngStyle

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

где ваш контроллер указывает $scope.colors = ['blue','red', 'green']

or 

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

и добавьте каждый в свою таблицу стилей

.blue { background-color: blue }
person TheBreakthrough    schedule 20.10.2015
comment
Спасибо за ваш ответ! - person Elvira Emm; 21.10.2015
comment
Но что, если мне нужен один и тот же цвет для нескольких строк. Скажем, первый ряд и последний. Я должен использовать $scope.colors = ['синий', ' ', 'синий']? Я думаю, что для этого должен быть другой подход. - person Elvira Emm; 21.10.2015
comment
@ElviraEmm Тогда подход Майкла может быть лучше для этого, используя методы индекса $first и $last. - person TheBreakthrough; 21.10.2015

arrow_upward
3
arrow_downward

Вот пример с угловым:

Шаблон:

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

Это придаст второй строке стиль, поскольку $index отсчитывается от нуля.

демонстрационная скрипта

person Michael P. Bazos    schedule 20.10.2015
comment
Я вижу в скрипке, что эта демонстрация работает. Но в моем проекте нет. Я посмотрю внимательнее, чтобы найти, где проблема. Спасибо за ответ! - person Elvira Emm; 21.10.2015
comment
Проблема была с библиотекой. У меня была версия 1.0.4. Перешел на 1.3.15 и теперь работает нормально! - person Elvira Emm; 21.10.2015
comment
1.0.4 старая :) Последняя стабильная версия на сегодняшний день 1.4.7. Обновление действительно приветствуется! - person Michael P. Bazos; 21.10.2015
comment
В контексте ng-repeat есть некоторые специальные переменные: $index равно индекс текущей строки, а также $first или $last, равный true, если текущая строка является первой (соответственно последней), или false в противном случае. - person Michael P. Bazos; 21.10.2015
comment
Пример: ng-class="{green: $first, blue: $index === 2 || $last}" добавит класс green для первой строки. Класс blue будет для третьей, а также для последней строки. Надеюсь понятно. - person Michael P. Bazos; 21.10.2015
comment
Но если у меня есть таблица с 20 строками, и я хочу установить один и тот же цвет фона для строк 1, 5, 7, 14, 19. Есть ли способ указать индексу, куда поместить цвет? - person Elvira Emm; 21.10.2015
comment
Затем вы можете подумать о добавлении свойства к объекту, привязанному к области, которое даст вам, какой класс вы должны применить (если применимо). Или создайте функцию getColor, которая принимает индекс в качестве входного параметра. - person Michael P. Bazos; 21.10.2015
comment
Пожалуйста. Попробуйте пометить этот вопрос как решенный и не стесняйтесь открыть другой, если у вас есть другие. - person Michael P. Bazos; 21.10.2015

arrow_upward
-1
arrow_downward

Код ниже используется для выделения выбранной строки.

<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']);
    }
}

HTML

<td>
    <button type="button" data-ng-click="addtoship()"> Add to Ship </button>
</td>
person Ravikumar Kalimuthuswamy    schedule 22.01.2018