Angularjs - Comment appliquer une classe différente dans & lt; tr & gt; conditionnellement à répéter la directive

J'ai besoin d'appliquer une autre classe à un <tr> selon la $index de la répétition de la directive. Par exemple

<table>
   <tr ng-repeat="model in list" class="xxx">
       <td>...</td>
   <tr>
</table>

J'ai besoin d'appliquer un style différent à <tr> selon que l'indice est pair et de l'impair.

Comment pourrais-je résoudre ce problème?

source d'informationauteur Aitiow

  1. 22

    Normalement vous devriez utiliser ngClassOdd (http://docs.angularjs.org/api/ng.directive:ngClassOdd) et ngClassEven (http://docs.angularjs.org/api/ng.directive:ngClassEven) directives comme ceci:

    <tr ng-repeat="item in items" ng-class-odd="'class1'" ng-class-even="'class2'">

    Voici le jsFiddle: http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/

    Il n'y a malheureusement un problème où les directives ne fonctionnent pas correctement lorsque des lignes sont supprimées: https://github.com/angular/angular.js/issues/1076

    Comme un travail, vous pouvez utiliser le ngClass directive (http://docs.angularjs.org/api/ng.directive:ngClass) avec $variable d'index exposée par un répéteur:

    <tr ng-repeat="item in items" ng-class="{class1 : $index%2==0, class2 : !($index%2==0)}">

    Voici le jsFiddle: http://jsfiddle.net/pkozlowski_opensource/am7xs/

    Il n'est pas super propre, mais qui pourrait être amélioré (par exemple, par l'exposition d'une fonction dans une racine de portée, quelque chose comme:

    ng-class="getClass($index,'class1','class2')"

    jusqu'à la mentionné bug est corrigé

  2. 5

    Si c'est juste pour le style, vous pouvez simplement utiliser les CSS

    tr:nth-child(odd) { ... }
tr:nth-child(even) {...}

    voir http://jsfiddle.net/5MSDC/ pour un exemple