How to assign alternate class to rows in Angular JS?

Question

I want to assign alternate class to rows in a table. I am using ng-repeat on

<tr ng-repeat="event in events"> 

I want to get output like this:

<tr class="odd">...</tr> <tr class="event">....</tr> 

I've tried this (doesn't work):

<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'"> 

I can't get it to work. Also it seems like Angular is using 'class' attribute to. Why is it doing so? Can I tell AngularJS not to use the class attribute for internal evaluations?

Please help. Thanks!

Answer 1

You should be using the angular directives ngClassEven and ngClassOdd for this.

Have a look at the documentation section for how to use them

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

Hope this helps.

Answer 2

From the Angular docs..

Use ng-class-odd ng-class-even

<li ng-repeat="name in names">   <span ng-class-odd="'odd'" ng-class-even="'even'">     {{name}}   </span> </li>