Comment affecter une autre classe de lignes dans Angular JS?

Je veux affecter une autre classe de lignes dans une table. Je suis à l'aide de 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é ceci (ne fonctionne pas):

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

Je ne peux pas le faire fonctionner. Aussi, il semble comme Angulaire est de l'utilisation de 'classe' attribut. Pourquoi est-il de le faire? Puis-je dire AngularJS ne pas utiliser l'attribut class pour les évaluations internes?

S'il vous plaît aider. Merci!

  • Cela peut ne pas être une réponse directe à votre question, mais jetez un oeil à CSS pairs et impairs, les règles. Si vous pouvez utiliser ces, vous n'avez pas besoin d'utiliser des classes.
  • Merci! Mais n'a pas de réponse à ma question(s). 🙂 Merci, de toute façon.
  • Si vous allez construire à partir d'une table, vous voudrez peut-être consulter angular-ui.github.com/ng-grid C'est un plein de fonctionnalités angularjs grille, nous avons travaillé sur le dernier mois.
InformationsquelleAutor Sameer Gupta | 2012-08-29
  1. 93

    Vous devriez être en utilisant l'angle de directives ngClassEven et ngClassOdd pour cela.

    Ont un coup d'oeil à la section de la documentation pour savoir comment les utiliser

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

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

    Espère que cette aide.

    • Vous pourriez aussi avoir fait ng-classe="$index % 2 == 0 && 'même' || 'bizarre'". Angulaire expressions n'ont pas le ternaire des opérateurs, mais vous pouvez utiliser et/ou.
    • Autres options: ng-class="['even', 'odd'][$index %2]", class="{{['even', 'odd'][$index %2]}}"
    • Il y avait un bug dans les versions ultérieures stackoverflow.com/q/23744429/1959948
    • Nota: // ng-classe="$index % 2 == 0 && 'même' || 'bizarre'" // l'approche est un peu plus souple, car elle préserve la ligne de segmentation, même lorsqu'un filtre est appliqué aux données.
    • Joslin réponse a fonctionné pour moi.
    • AngularJS Expressions beaucoup N'ont ternaire expressions. Je les utilise tout le temps.

    InformationsquelleAutor ganaraj
  2. 19

    De l'angle de docs..

    Utilisation ng-classe-impair ng-classe-même

    <li ng-repeat="name in names">
  <span ng-class-odd="'odd'" ng-class-even="'even'">
    {{name}}
  </span>
</li>
    InformationsquelleAutor Fintan Kearney
  3. 9

    Comme @ganaraj états ng-classe-impair et ng-classe-même sont la bonne façon de le faire, mais pour le bénéfice des chercheurs, votre proposition initiale n'étais pas très loin de travail Angulaire >=1.2.19.

    Ici est étroitement lié exemple de quelque chose qui aurait fonctionné et fonctionne également si la coloration de plus que celui des autres lignes (par exemple tous 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>

    InformationsquelleAutor HockeyJ
  4. 6

    Vous pouvez également utiliser le ng-class-odd et ng-class-even directives directement à l'intérieur de la ng-repeat directive.

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

    Qui nous donne belle alternance de classes pour chaque ligne:

    Comment affecter une autre classe de lignes dans Angular JS?

    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

    Comment affecter une autre classe de lignes dans Angular JS?

    InformationsquelleAutor Mike Gledhill
  5. 0

    L'amélioration de Fintan Kearney réponse,

    À partir de: https://docs.angularjs.org/api/ng/directive/ngClassOdd

    Style.css

    .odd {
  color: red;
}
.even {
  color: blue;
}

    index.html

    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{name}}
   </span>
  </li>
</ol>
    InformationsquelleAutor danilo