Search code examples
cssangularjsangularjs-ng-class-evenangularjs-ng-class-odd

ngClassOdd/ngClassEven not working as expected

Using Angular version 1.2.15, I found a bug that it seems started on version 1.2.2 until 1.2.15.

Plunker Demo to reproduce

Html

<body ng-app="">
     <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz','Felipe','Vero']">
     <li ng-repeat="name in names">
      <span ng-class-odd="'shared odd'" ng-class-even="'shared even'">
        {{name}}
      </span>
     </li>
   </ol>
</body

CSS

 .shared {color: red;}
 .even{ background-color:yellow; }
 .odd{ background-color:white; }

You will see how the odd style does not work on the 3rd Element.

Is there any workaround for this issue?

If not what would make more sense upgrade or downgrade?

Solution

  • This was a known bug and has been fixed, so why not update to v1.2.16 ?
    It works as expected on v1.2.16.

    If you want to stay on v1.2.15 you should either use Morgan's solution (ng-class + $index), or include only one class in ngClassOdd/ngClassEven:

    <span class="shared" ng-class-odd="'odd'" ng-class-even="'even'">

    BTW, there were no breaking changes in version 1.2.16 (according to the changelog), so upgrading should be totally transparent.

    UPDATE:

    For the sake of completeness, I should mention there is the option of using ngRepeat's $even/$odd properties. E.g.:

    <span ng-class="$even?'shared odd':'shared even'">

    Note:
    Since the list of items displayed by ngRepeat is 0-based, the 1st element ($index: 0) is considered odd, while we (humans) expect the 1st element to be considered even. So, make sure you apply the classes "inversely".
    The same is true for the ngClass + $index approach.

    The recommended solution is still to upgrade to v1.2.16.
    Just in case, here is a plunkr with all 3 v1.2.15 solutions.