How to assign alternate class to rows in Angular JS?

Issue

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!

Solution

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

Answered By - ganaraj