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

Tags:

Angularjs