71 votes

Comment affecter une classe alternative aux lignes de Angular JS?

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!

93voto

ganaraj Points 14228

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.

21voto

user3182400 Points 23

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>
 

9voto

HockeyJ Points 1408

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>
 

6voto

Mike Gledhill Points 2105

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:

enter image description here

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

enter image description here

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X