Angular JS ng-class-odd in nested ng-repeats
The value of ng-class-odd
and ng-class-even
can be a string: ng-class-odd="'myClass'"
or an expression ng-class-odd="{myClass: boolExpression}"
Also:
Angular 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 />
Angular < 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>
Examples: http://jsfiddle.net/TheSharpieOne/JYn7S/1/
Wolfman Joe
Updated on June 04, 2022Comments
-
Wolfman Joe almost 2 years
I'm trying to develop a very generic table outputter - no set number of rows or columns. As such, I've got nested ng-repeat attributes, as such:
<table> <tr ng-repeat="row in rowList"> <td ng-repeat="col in colList">{{printCell(row,col)}}</td> </tr> </table>
It's working great! Until I try to use
ng-class-even
andng-class-odd
to change the background color of the rows accordingly.If I put the
ng-class-***
statements on thetd
tag, I get alternating column colors.If I put the
ng-class-***
statements on thetr
tag, I don't get any class assignment - they all stay default.I want alternating row colors. How do I go about doing this?
EDIT:
Please delete this, someone? It turns out the problem was that my css classes were specifying that the class were set on a td tag.
-
Wolfman Joe over 10 yearsThank you for the info on using
ng-class
instead ofng-class-even
andng-class-odd
. However, in this situation, the problem was not in the angularjs, but in the css - I'd specified the classes as td.even and td.odd, so they weren't showing up on the tr tag.