5

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?

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
  • It looks like it works only if one of style is applied. A probable workaround is to set the even style as default and then change it for odd rows (or vice versa). – Edwin Dalorzo May 19 '14 at 18:33

3 Answers3

18

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.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • Well I guess he's got the options he's looking for now, I'm curious to see what he picks. – Morgan Delaney May 19 '14 at 20:14
  • 1
    @MorganDelaney: We had forgotten about the `$even`/`$odd` properties exposed by `ngRepeat`. I think **now** OP has all available options :) – gkalpak May 19 '14 at 20:42
  • it looks like upgrading is the safer/correct approach since it is a minor upgrade – Dalorzo May 19 '14 at 20:44
  • Yup ! I am all into upgrading ! (I used `v1.3.0-beta.7` on my latest production project - but don't tell my boss :P) – gkalpak May 19 '14 at 20:46
4

From your Plunkr, it looks like you're simply not getting that "shared" class in there.

An alternative could be to use ng-class in conjunction with $index

Here's an example on Plunkr which checks to see if $index is divisible by 2

<span ng-class="{ even: !($index % 2), odd: !!($index % 2) }" class="shared">

Morgan Delaney
  • 2,349
  • 3
  • 20
  • 23
0
**The value of `ng-class-odd` and `ng-class-even` can be a string: `ng-class-odd="'myClass'"` or an expression `ng-class-odd="{myClass: boolExpression}"`**

Also:

**Angular 1.2+**: `ng-class="{even: $even, odd: $odd}"`

    <ul>
        <li ng-repeat="name in names">
           <span> ng-class="{even: $shared even, odd: `enter code here`$shared odd}">{{name}}</span>

        </tr>
    </ul>
    <hr />

**Angular < 1.2** `ng-class="{even: !($index%2), odd: ($index%2)}"`
user3722785
  • 216
  • 1
  • 13
  • Humm, that's a copy and paste of another thread : http://stackoverflow.com/questions/18725832/angular-js-ng-class-odd-in-nested-ng-repeats – DarkUrse Oct 31 '14 at 10:22