Saqib Ali Saqib Ali - 2 months ago 9
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:

<tbody>
<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="currElement.name">
</a>
</td>
</tr>
</tbody>


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

Answer

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: http://jsfiddle.net/uL5zd8sy/1/

Comments