Angular JS ng-class-odd во вложенных повторах ng

Я пытаюсь разработать очень общий вывод таблицы - без заданного количества строк или столбцов. Таким образом, у меня есть вложенные атрибуты ng-repeat, как таковые:

<table>
    <tr ng-repeat="row in rowList">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

Он отлично работает! Пока я не попытаюсь использовать ng-class-even и ng-class-odd, чтобы соответственно изменить цвет фона строк.

Если я помещу операторы ng-class-*** в тег td, я получу чередующиеся цвета столбцов.

Если я помещу операторы ng-class-*** в тег tr, я не получу никакого присвоения класса — все они останутся по умолчанию.

Я хочу чередовать цвета строк. Как мне это сделать?

РЕДАКТИРОВАТЬ:

Пожалуйста, удалите это, кто-нибудь? Оказывается, проблема заключалась в том, что мои классы CSS указывали, что класс был установлен в теге td.


javascript angularjs nested angularjs-ng-repeat
person Wolfman Joe    schedule 10.09.2013    source источник

Ответы (1)


arrow_upward
26
arrow_downward

Значение ng-class-odd и ng-class-even может быть строкой: ng-class-odd="'myClass'" или выражением ng-class-odd="{myClass: boolExpression}"

Также:

Угловой 1.2+: ng-class="{even: $even, odd: $odd}"

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: $even, odd: $odd}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>
<hr />

Угловой ‹ 1.2 ng-class="{even: !($index%2), odd: ($index%2)}"

<table>
    <tr ng-repeat="row in rowList" ng-class="{even: !($index%2), odd: ($index%2)}">
        <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
    </tr>
</table>

Примеры: http://jsfiddle.net/TheSharpieOne/JYn7S/1/

person TheSharpieOne    schedule 10.09.2013
comment
Спасибо за информацию об использовании ng-class вместо ng-class-even и ng-class-odd. Однако в этой ситуации проблема была не в angularjs, а в css — я указал классы как td.even и td.odd, поэтому они не отображались в теге tr. - person Wolfman Joe; 10.09.2013