javascript - Angular JSの行に代替クラスを割り当てる方法は？

Question

テーブルの行に代替クラスを割り当てたい。ng-repeatを使用しています

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

次のような出力を取得したい：

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

私はこれを試しました（動作しません）：

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

動作させることができません。また、Angularはに'class'属性を使用しているようです。なぜそうしているのですか？内部評価にクラス属性を使用しないようにAngularJSに指示できますか？

助けてください。ありがとう！

Answer 1

これには、角度ディレクティブngClassEvenおよびngClassOddを使用する必要があります。

それらの使用方法については、ドキュメントのセクションをご覧ください

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

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

お役に立てれば。

Answer 2

Angular ドキュメントから..

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

@ganaraj が ng-class-odd と ng-class-even がこれを行う正しい方法であると述べているように、検索者の利益のために、最初の提案は Angular >=1.2.19 で動作することから遠く離れていませんでした。

以下は、1 行おきに複数の行 (たとえば 3 行ごと) に色を付ける場合に機能し、機能するものの密接に関連した例です。

<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

ng-class-oddおよびng-class-evenディレクティブをディレクティブ内で直接使用することもできますng-repeat。

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

これにより、行ごとに素敵な交互のクラスが得られます。

この例は、次のページから取得したもので、JSON データを使いやすく応答性の高いマスター ビュー ページに変換する方法も示しています。

AngularJS を使用したマスター ビュー