Angular JS ng-class-odd in nested ng repeats

Question

I am trying to develop a very general output from a table - no number of rows or columns specified. Thus, I have ng-repeat nested attributes, as such:

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

It works great! Until I try to use ng-class-even and ng-class-odd to change the background color of the strings accordingly.

If I put the ng-class-*** operators in the td tag, I get the column color variables.

If I put the ng-class-*** operators in the tr tag, I don't get any class assignment - they all remain by default.

I need string color variables. How should I do it?

EDIT:

Please delete this, anyone? Turns out the problem was that my css classes indicated that the class was installed on the td tag.

Answer 1

The value of ng-class-odd and ng-class-even can be a string: ng-class-odd="'myClass'" or the 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/