Das Hinzufügen mehrerer Klassen unter Verwendung von ng-class

Question

ALERT: Dieser Thread ist für das alte AngularJS!

Können wir mehrere Ausdrücke haben, um mehrere ng-class hinzuzufügen ?

Zum Beispiel.

Wenn ja, kann jemand das Beispiel dafür aufstellen.

.

Answer 1

Um verschiedene Klassen anzuwenden, wenn verschiedene Ausdrücke als true ausgewertet werden:

    Hallo Welt!

Um mehrere Klassen anzuwenden, wenn ein Ausdruck wahr ist:

    Hallo Welt!

oder ganz einfach:

    Hallo Welt!

Bemerken Sie die einfachen Anführungszeichen um die CSS-Klassen herum.

Answer 2

Für die Ternär-Operator-Notation:

Answer 3

Ein unglaublich mächtiges Alternativ zu anderen Antworten hier:

ng-class="[  { key: resulting-class-expression }[ key-matching-expression ], ..  ]"

Einige Beispiele:

1. Fügt einfach 'class1 class2 class3' dem div hinzu:

2. Fügt 'gerade' oder 'ungerade' Klassen dem div hinzu, abhängig vom $index:

3. Erstellt dynamisch eine Klasse für jedes div basierend auf $index

Wenn $index=5, wird dies zu folgendem Ergebnis führen:

Hier ist ein Codebeispiel, das Sie ausführen können:

var app = angular.module('app', []); 
app.controller('MyCtrl', function($scope){
  $scope.items = 'abcdefg'.split('');
}); 

.odd  { background-color: #eee; }
.even { background-color: #fff; }
.index5 {background-color: #0095ff; color: white; font-weight: bold; }
* { font-family: "Courier New", Courier, monospace; }

    index {{$index}} = "{{item}}" ng-class="{{[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]].join(' ')}}"

Answer 4

Ja, du kannst mehrere Ausdrücke haben, um mehrere Klassen in ng-class hinzuzufügen.

Zum Beispiel:

 Dummy Data

Answer 5

Mit einer $scope Methode im Controller können Sie berechnen, welche Klassen im View ausgegeben werden sollen. Das ist besonders praktisch, wenn Sie komplexe Logik zur Berechnung von Klassennamen haben und es reduziert die Menge an Logik im View, indem sie in den Controller verschoben wird:

app.controller('myController', function($scope) {

    $scope.className = function() {

        var className = 'initClass';

        if (condition1())
            className += ' class1';

        if (condition2())
            className += ' class2';

        return className;
    };
});

und im View einfach: