AngularJS - Wie füge ich mehrere ng-class Direktiven hinzu?

Question

Hier sind zwei verschiedene Möglichkeiten, die ng-class Direktive zu verwenden. Ich brauche sie beide, auf demselben Element, aber das funktioniert nicht.

ein Objekt in ng-Klasse verwenden

http://plnkr.co/edit/uZNK7I?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
    ng-class="{ first: $first, last: $last }">{{item}}</div> 

Ergebnisse korrekt in

<div class="first">1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div class="last">5</div> 

---

einen Ausdruck in ng-Klasse verwenden

http://plnkr.co/edit/tp6lgR?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
    ng-class=" 'count-' + ($index + 1) ">{{item}}</div> 

Ergebnisse richtig in

<div class="count-1">1</div> 
<div class="count-2">2</div> 
<div class="count-3">3</div> 
<div class="count-4">4</div> 
<div class="count-5">5</div> 

---

Nun, wie sie etwa zusammen verwenden?

Ich brauche dynamische Klassennamen (wie 'count-' + n), aber auch die Objekt-Syntax für mehrere Klassen.

Ich kann nicht einfach 2 ng-class Attribute (http://plnkr.co/edit/OLaYke?p=preview) verwenden, nur die erste funktioniert.

Irgendwelche Vorschläge?

Answer 1

Sie sollten nicht ng-class für die zweite verwenden möchten, verwenden

<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }"> 

Answer 2

ich, was Sie atributes ng-class mit ;

try trennen kann:

ng-class=" 'count-' + ($index + 1) ; { first: $first, last: $last }" 

Answer 3

Wenn Sie brauchen um sie miteinander zu vermischen, gehen Sie einfach auf Strings concat:

ng-class="'count-' + ($index+1) + ($first?' first':($last?' last':''))" 

Oder für eine klarere Sicht:

ng-class="'count-' + ($index+1) + ($first?' first':'') + ($last?' last':'')" 

Es gibt für nicht bekannte Profis class="{{exp}}" statt ng-class="exp" verwenden, da beide, wenn der Wert von exp Änderungen aktualisiert. Im Gegenteil, die erste Seite könnte in einigen Fällen zum Einfrieren der Seite führen.

Answer 4

Sie bieten sollte ngClass mit einem Array, das sowohl Ausdruck und Objekt enthält:

<div ng-class="['count-' + ($index + 1), { first: $first, last: $last }]"> 

Hinweis: Die Lösung in akzeptierte Antwort vorgeschlagen (gleichzeitige Nutzung von ngClass Richtlinie und Interpolation in class Attribut) ist eine schlechte Übung. Siehe mehr Details here und here.