Menu
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?
785
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.
52
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">
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
