Angularjs - Как применить другой класс в <tr> условно, чтобы повторить директиву

Мне нужно применить другой класс к <tr> в соответствии с $index директивы repeat. Например

<table>
   <tr ng-repeat="model in list" class="xxx">
       <td>...</td>
   <tr>
</table>

Мне нужно применить другой стиль к <tr> в зависимости от того, является ли индекс четным и нечетным.

Как я могу это решить?

Ответ 1

Обычно вы должны использовать ngClassOdd (http://docs.angularjs.org/api/ng.directive:ngClassOdd) и ngClassEven (http://docs.angularjs.org/api/ng.directive:ngClassEven):

<tr ng-repeat="item in items" ng-class-odd="'class1'" ng-class-even="'class2'">

Вот jsFiddle: http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/

К сожалению, существует проблема, когда указанные директивы работают некорректно при удалении строк: https://github.com/angular/angular.js/issues/1076

В качестве работы вы можете использовать директиву ngClass (http://docs.angularjs.org/api/ng.directive:ngClass) с помощью индекса $index переменная, отображаемая ретранслятором:

<tr ng-repeat="item in items" ng-class="{class1 : $index%2==0, class2 : !($index%2==0)}">

Вот jsFiddle: http://jsfiddle.net/pkozlowski_opensource/am7xs/

Это не супер-чистый, но может быть улучшен (например, выставляя функцию в корневой области, что-то вроде:

ng-class="getClass($index,'class1','class2')"

до тех пор, пока не будет исправлена указанная ошибка

Ответ 2

Если это просто для стилизации, вы можете просто использовать CSS

tr:nth-child(odd) { ... }
tr:nth-child(even) {...}

см. http://jsfiddle.net/5MSDC/ для примера