AngularJS ngRepeat: how to differentiate even/odd elements?

Question

I'm new to angular and trying to do the following:

<tr data-ng-repeat="element in awesomeThings">
<div ng-if="$index %2 == 0">
    <td class="even">
        <a href="#">
            {{element}}
        </a>
    </td>
</div>
<div ng-if="$index %2 != 0">
    <td class="odd">
        <a href="#">
            {{element}}
        </a>
    </td>
</div>
</tr>

for the above code, both ng-if is passing. Where I'm making mistake?

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

Try this in css:

tr:nth-child(even) {
    background: #CCC
}

tr:nth-child(odd) {
    background: #FFF
}

You could define style for the first item:

tr:first-child {
    background: #84ace6
}