Angular - ein bedingten $ ungerade/$ selbst sowie eine ng wiederholte Eigenschaft mit ngClass Mit

Question

Ich habe eine ng-repeat etwa so:

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

Ich mag hier zwei Dinge tun:

1. Wenn der Artikel $odd ist, geben Sie ihm eine Klasse von "tableOdd"; Wenn $even, geben Sie "TableEven".
2. Fügen Sie dem Element, das auf item.ItemStatus verweist, auch eine Klasse hinzu.

Aus verschiedenen Gründen (das mit md-virtual-repeat über ein Tabellenlayout mit kantigem-Material verwendet wird), kann ich nicht ein Element als Kind oder Elternteil zu dieser ng-Wiederholung mit einer zusätzlichen ng-Klasse auf hinzufügen.

Ich habe versucht:

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

auch versucht:

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

aber beide Fehler geben. Wie erreiche ich das am besten?

Answer 1

Sie können die Klasse mithilfe eines eckigen Ausdrucks basierend auf dem Wert ItemStatus in jedem Element hinzufügen und dann ng-class verwenden, um gerade Klassen hinzuzufügen oder wie unten hinzuzufügen.

Beachten Sie die Verwendung von :: vor dem Eigenschaftsnamen zum Erstellen einer einmaligen Bindung, dh die Ausdrücke werden nur einmal zu Werten umgesetzt. Wenn Sie mit Ihren Klassen aktualisieren möchten ItemStatus Wert im Array aktualisieren, können Sie :: entfernen und {{item.ItemStatus}}

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

Hier ist ein Beispiel Pen in Aktion verwenden.

Answer 2

Sie können die String-Syntax von ng-class verwenden, um es etwas einfacher zu machen. Zum Beispiel:

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

Auch könnten Sie in ngClassEven und ngClassOdd interessiert. Sie arbeiten in Verbindung mit ngRepeat und ermöglichen es Ihnen, eine Klasse für ein Element basierend darauf festzulegen, ob es gerade oder ungerade ist.

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

Hier ist ein nützlicher Beitrag der many ways of using ngClass.