AngularJS ngRepeat: how to differentiate even/odd elements?
Try $even
and $odd
properties. Refer the documentation.
Like :
<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$even">
<td class="even">
<a href="#">
{{element}}
</a>
</td>
</div>
<div ng-if="$odd">
<td class="odd">
<a href="#">
{{element}}
</a>
</td>
</div>
</tr>
You don't need to use ng-if to check whether it's an even or odd element, that functionality is built-in already:
<tr ng-repeat="element in awesomeThings">
<span ng-class="$even ? 'odd' : 'even'">{{element}}</span>
</tr>
Another built-in feature is ng-class
which gives you several options to conditionally set a css class, here I'm using the ternary version but there are other ways to use it also.
Here is a working example
Also, here is a good article explaining more about ng-class
You can also use ng-class-even and ng-class-odd.
https://docs.angularjs.org/api/ng/directive/ngClassEven https://docs.angularjs.org/api/ng/directive/ngClassOdd