Best IT Recipes

NgClassOdd / ngClass This does not work properly

Using Angular version 1.2.15, I found an error that seems to have started from version 1.2.2 to version 1.2.15.

Demo Playback Plunker

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 with the 3rd element.

Is there any workaround?

If it were not more appropriate to upgrade or downgrade?

+5
angularjs css angularjs-ng-class-even angularjs-ng-class-odd
May 19 '14 at 18:09
source share
3 answers

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

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

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


BTW, in version 1.2.16 there were no changes in violation (according to changelog ), so the update should be completely transparent.



UPDATE:

For completeness, I should mention that it is possible to use the ngRepeat $even / $odd properties. For example:.

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

<sub> Note:
Since the list of elements displayed by ngRepeat is based on 0, the first element ( $index: 0 ) is considered odd, and we (people) expect the 1st element to be considered even. So make sure you apply the classes back.
The same is true for the ngClass + $index approach. Sub>



The recommended solution is still being updated to v1.2.16 .
Just in case, there is plunkr with all 3 v1.2.15 solutions.

+18
May 19 '14 at 18:44
source share

From your Plunkr, it seems you just don't get this “generic” class there.

An alternative would be to use ng-class in combination with $index

Here is an example on Plunkr that checks if $ index is divisible by 2

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

+4
May 19 '14 at 18:32
source share
 **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)}"`
0
Sep 02 '14 at 18:15
source share


More articles:


All Articles