similar to nth-child(even) for a

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

NG-repeat should be on the li not the ul and for that you have ngclasseven and ngclassodd — Dalorzo, Apr 16 '14 at 13:49
I have an ng-repeat in my li into and another ng-repeat in my ul, but both are synchronized and am getting what I need to render — UI Developer, Apr 16 '14 at 13:50
ngclasseven and ngclassodd or $index along with ngClass should solve any issue of that kind — Dalorzo, Apr 16 '14 at 13:51
**This is clearly _not_ a duplicate !** The question, that this one is supposed to be a duplicate of, is about applying classes conditionally in general (and not in the context of an `ngRepeat` directive (which offers clearly more choices). Furthermore, this one is about applying classes to even/odd nth childs and the "already answered" question (in its 18 answers) has no mention of the best options which would be `ngClassEven/Odd` and `ngRepeat`'s `$even/$odd` properties (see my answer below). This question should be reopened ! — gkalpak, Apr 17 '14 at 05:57

gkalpak · Answer 1 · 2014-04-16T14:10:45.507

2

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.

edited Apr 16 '14 at 14:10

answered Apr 16 '14 at 13:55

gkalpak

47,844
8
105
118

for some reason it is not exposing the boolean $even and $odd on a ul level – UI Developer Apr 16 '14 at 14:09
1

@UIDeveloper: `$even` and `$odd` are exposed to the scope that `ngRepeat` creates. If you put `ngRepeat` on a `
` it will be exposed there; if you put `ngRepeat` on a `

gkalpak

Apr 16 '14 at 14:12

I agree with you... ng-class-even works perfectly put for an li and not a ul for some reason – UI Developer Apr 16 '14 at 14:12

1

Again: If you put ngRepeat on ul it will work on a ul. If you have some code that does not seem to work, share it with us so we can find out what's wrong. – gkalpak Apr 16 '14 at 14:15

Based on your comments I realized that I did a silly mistake witch is that each ul was in a separated div, there for I am not in the case of an odd even .. thank u – UI Developer Apr 16 '14 at 14:17

@UIDeveloper: If this answer helped you solve the problem, please mark it as accepted. (Don't forget to also upvote it if you haven't already :)) – gkalpak Apr 25 '14 at 10:06

Nidhish Krishnan · Answer 2 · 2014-04-16T14:10:02.257

1

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

enter image description here

edited Apr 16 '14 at 14:10

answered Apr 16 '14 at 13:57

Nidhish Krishnan

20,593
6
63
76

this works well on the li level and I need to have odd- even on my ul – UI Developer Apr 16 '14 at 14:07
@UIDeveloper is this your requirement – Nidhish Krishnan Apr 16 '14 at 14:46

similar to nth-child(even) for a

2 Answers2