similar to nth-child(even) for a <ul> - html

Question

I did an ng-repeat on a ul.
Obviously, I cant use nth-child(even) to apply it on ul to change the background-color of the even ul
Anyone knows something similar

Answer 1

ngRepeat exposes the boolean $even and $odd properties, which you can combine with ngClass:
<ul>
<li ng-repeat="item in items" ng-class="{'some-class':$odd}">
{{item.someText}
</li>
</ul>
Note: $even and $odd are based on the currnt $index which is zero-based, so you might need to use $odd instead of $even.
Or you can use the ngClassEven / ngClassOdd directives:
<ul>
<li ng-repeat="item in items" ng-class-even="'some-class'">
{{item.someText}
</li>
</ul>
See, also, this short demo.

Answer 2

Try this out
Working Demo
html
<div ng-app="">
<div ng-init="predicate='name'; reverse=false;">Sort: predicat:{{predicate}} reverse:{{reverse}} </div>
<div ng-click="reverse=!reverse">[change reverse]</div>
<div ng-click="predicate='name'; reverse=!reverse;">[set predicate: name + change reverse]</div>
<div ng-click="predicate='id'; reverse=!reverse;">[set predicate: id + change reverse]</div>
<div ng-init="lines=[{'name':'eee', 'id':7}, {'name':'aaa', 'id':9}, {'name':'ccc', 'id':8}, {'name':'bbb', 'id':2}, {'name':'ddd', 'id':3}]">
<ul ng-repeat="line in lines | orderBy:predicate:reverse" ng-class-odd="'odd'" ng-class-even="'even'">
<li >{{ line.name }}</li>
</ul>
</div>
</div>
Output