角度 - 私はそうのような-ngのを繰り返してい$奇数/ $条件付きであっても同様にngClass

Question

とNG-繰り返しプロパティを使用：

<div ng-repeat="item in data"> 
    {{item.text}} 
</div> 

私はここに二つのことやりたい：

を

1. 項目が$oddの場合は、「tableOdd」のクラスを指定します。 $evenの場合は、「tableEven」と指定します。
2. また、item.ItemStatusを参照する要素にクラスを追加します。様々な理由から

（これはテーブルレイアウト上md-virtual-repeatと角度材料で使用されている）、私はそれに追加のNG-クラスでこのNGリピートの子や親としての要素を追加することはできません。

私が試した：

ng-class="{{ $even ? item.ItemStatus + ' tableEven': 
    ($odd ? item.ItemStatus + ' tableOdd': item.ItemStatus) }}" 

が、両方はエラーを与える：

ng-class="{ item.ItemStatus + 'tableEven': $even, 
    item.ItemStatus + 'tableOdd': $odd }" 

も試してみました。どのようにこれを達成する最良の？

Answer 1

それぞれの項目にItemStatusの値に基づく角度式を使用してクラスを追加し、次にng-classを使用して、次のようなクラスを追加したり追加したりすることができます。

1つのタイムバインディングを作成するためのプロパティ名の前に::を使用することに注意してください。これは、式が値に1回のみ実現されることを意味します。あなたは、アレイ内ItemStatus値を更新することにより、あなたのクラスを更新したい場合は、::を削除することができます。ここでのアクションでサンプルPenだ{{item.ItemStatus}}

<li class="{{::item.ItemStatus}}" ng-repeat="item in data" 
     ng-class="{ 'tableEven': $even , 'tableOdd': $odd }"> 
     {{item.text}} 
</li> 

使用しています。

Answer 2

ng-classの文字列構文を使用すると、少し簡単にすることができます。たとえば：

<div ng-class="item.itemStatus + ($even ? ' classOdd' : ' classEven')"></div> 

また、あなたはngClassEvenとngClassOddに興味があるかもしれません。これらはngRepeatと連携して動作し、アイテムが偶数か奇数かに基づいてアイテムのクラスを設定できます。

<div ng-repeat="item in data" ng-class-odd="'tableOdd ' + item.ItemStatus" ng-class-even="'tableEven ' + item.ItemStatus"> 
     {{item.text}} 
    </div> 

ここにはmany ways of using ngClassの便利な投稿があります。