Saqib Ali Saqib Ali - 1 year ago 93
AngularJS Question

Angular: How to alternate CSS classes for a list, with more than 2 classes?

I have the following

Angular template
. This nicely alternates the style class of each row such that
even-numbered rows
have one class and
odd-numbered rows
have a different class:

<tr ng-repeat="currElement in myCtrl.elementList track by $index" >
<td ng-class-odd="'element-tilt-left'" ng-class-even="'element-tilt-right'">
<a ui-sref="myState({elementId: currElement.elementId)" ng-bind="">

But now I want to cycle among 4 different style classes instead of just two. How can I do it?

Answer Source

I like Divyanshu's answer, but instead of listing all the classes would suggest just computing the class name inline like:

ng-class="'class' + $index%4"

Here is an update to his fiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download