indexing - Angularjs - ディレクティブを繰り返すために条件付きで異なるクラスを適用する方法

Question

繰り返しディレクティブ<tr>に従って、別のクラスをに適用する必要があります。$index例えば

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

<tr>インデックスが偶数か奇数かによって、異なるスタイルを適用する必要があります。

どうすればこれを解決できますか？

Answer 1

通常、次のような ngClassOdd ( http://docs.angularjs.org/api/ng.directive:ngClassOdd ) および ngClassEven ( http://docs.angularjs.org/api/ng.directive:ngClassEven ) ディレクティブを使用します。

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

これが jsFiddle です: http://jsfiddle.net/pkozlowski_opensource/hNHJ4/1/

残念ながら、行が削除されたときに前述のディレクティブが正しく機能しないという問題があります: https://github.com/angular/angular.js/issues/1076

回避策として、リピーターによって公開された $index 変数でngClass ディレクティブ ( http://docs.angularjs.org/api/ng.directive:ngClass ) を使用できます。

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

これが jsFiddle です: http://jsfiddle.net/pkozlowski_opensource/am7xs/

非常にクリーンではありませんが、改善される可能性があります (たとえば、次のようなルート スコープで関数を公開することによって:

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

上記のバグが修正されるまで

Answer 2

これがスタイリングのためだけの場合は、CSSを使用できます

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

例については、http://jsfiddle.net/5MSDC/を参照してください。