Comment affecter une classe alternative aux lignes de Angular JS?

Question

Je veux affecter une autre classe aux lignes d'une table. J'utilise ng-repeat sur

 <tr ng-repeat="event in events">
 

Je veux obtenir une sortie comme ceci:

 <tr class="odd">...</tr>
<tr class="event">....</tr>
 

J'ai essayé ça (ça ne marche pas):

 <tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'">
 

Je n'arrive pas à le faire marcher. En outre, Angular semble utiliser l'attribut 'class' pour. Pourquoi le fait-il? Puis-je dire à AngularJS de ne pas utiliser l'attribut de classe pour les évaluations internes?

S'il vous plaît aider. Merci!

Answer 1

Vous devriez utiliser les directives angulaires ngClassEven et ngClassOdd pour cela.

Consultez la section documentation pour savoir comment les utiliser

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

J'espère que cela t'aides.

Answer 2

De la documentation angulaire ..

Utilisez ng-class-odd ng-class-even

 <li ng-repeat="name in names">
  <span ng-class-odd="'odd'" ng-class-even="'even'">
    {{name}}
  </span>
</li>
 

Answer 3

Comme @ganaraj déclare que ng-class-odd et ng-class-even sont la bonne manière de le faire, mais pour le bénéfice des chercheurs, votre proposition initiale était loin de fonctionner dans Angular> = 1.2.19.

Voici un exemple étroitement lié de quelque chose qui aurait fonctionné et qui fonctionnerait également si vous coloriez plus de lignes alternées (par exemple toutes les 3 lignes):

 <div>
<style>
    .color0 {
        background-color: lightblue;
    }

    .color1 {
        background-color: lightyellow;
    }

    .color2 {
        background-color: lightgray;
    }
</style>


<div ng-repeat="result in results" ng-class="'color' + ($index % 3)">
    <div>
        <p>{{result.myText}}</p>
    </div>
</div>
 

Answer 4

Vous pouvez également utiliser l' ng-class-odd et ng-class-even directives directement au sein de l' ng-repeat directive.

<div class="cssOneProductRecord" 
   ng-repeat='..' 
   ng-class-odd="'cssProductOdd'" 
   ng-class-even="'cssProductEven'" >

Ce qui nous donne belle alternance de classes pour chaque ligne:

Cet exemple est tiré de la page suivante, qui illustre également comment transformer les données JSON dans un match amical, sensible Maître de la page d'Affichage de:

Maître-Vues en utilisant AngularJS