Was ist der beste Weg, um bedingt eine Klasse anzuwenden?

Question

Sagen wir, Sie haben ein Array, das in einem ul mit einem li für jedes Element und einer Eigenschaft auf dem Controller namens selectedIndex gerendert wird. Wie könnte man am besten eine Klasse zu dem li mit dem Index selectedIndex in AngularJS hinzufügen?

Derzeit dupliziere ich (manuell) den li-Code und füge die Klasse zu einem der li Tags hinzu und benutze ng-show und ng-hide, um nur ein li pro Index anzuzeigen.

Answer 1

Wenn Sie keine CSS-Klassennamen in den Controller einfügen möchten, wie ich es tue, hier ist ein alter Trick, den ich seit den Zeiten vor v1 verwende. Wir können einen Ausdruck schreiben, der direkt zu einem Klassenname selected ausgewertet wird, es sind keine benutzerdefinierten Direktiven erforderlich:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Bitte beachten Sie die alte Syntax mit dem Doppelpunkt.

Es gibt auch eine bessere Möglichkeit, Klassen bedingt anzuwenden, wie zum Beispiel:

ng-class="{selected: $index==selectedIndex}"

Angular unterstützt jetzt Ausdrücke, die ein Objekt zurückgeben. Jede Eigenschaft (Name) dieses Objekts wird nun als Klassenname betrachtet und je nach ihrem Wert angewendet.

Allerdings sind diese Möglichkeiten nicht funktional gleich. Hier ist ein Beispiel:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Wir könnten daher vorhandene CSS-Klassen wiederverwenden, indem wir ein Modellattribut auf einen Klassennamen abbilden und gleichzeitig CSS-Klassen aus dem Controller-Code heraus halten.

Answer 2

ng-class unterstützt einen Ausdruck, der entweder zu Folgendem ausgewertet werden muss:

1. Eine Zeichenkette aus Leerzeichen-getrennten Klassenbezeichnungen oder
2. Ein Array von Klassenbezeichnungen oder
3. Eine Abbildung/Objekt von Klassenbezeichnungen zu booleschen Werten.

So können wir mithilfe von Form 3) einfach schreiben

ng-class="{'selected': $index==selectedIndex}"

Siehe auch Wie wende ich bedingt CSS-Stile in AngularJS an? für eine umfassendere Antwort.

---

Update: Angular 1.1.5 hat Unterstützung für einen Ternäroperator hinzugefügt, also wenn Ihnen diese Konstruktion vertrauter ist:

ng-class="($index==selectedIndex) ? 'selected' : ''"

Answer 3

Mein bevorzugte Methode ist die Verwendung des Ternärausdrucks.

ng-class="Bedingung ? 'trueClass' : 'falseClass'"

Hinweis: Falls du eine ältere Version von Angular verwendest, solltest du stattdessen dies verwenden:

ng-class="Bedingung && 'trueClass' || 'falseClass'"

Answer 4

Ich werde das ergänzen, weil einige dieser Antworten veraltet zu sein scheinen. So mache ich es:

Wo "isSelected" eine im umschlossenen Angular-Controller definierte JavaScript-Variable ist.

Um Ihre Frage genauer zu beantworten, hier ist, wie Sie eine Liste damit generieren könnten:

HTML

       {{item.name}}

JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Punkt 1", "isSelected": "aktiv"},  
        {"name": "Punkt 2", "isSelected": ""}
    ]
}

Siehe: http://jsfiddle.net/tTfWM/

Siehe: http://docs.angularjs.org/api/ng.directive:ngClass

Answer 5

Hier ist eine viel einfachere Lösung:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;

    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }

    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }

    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Abwählen";
        } else{
            return "Auswählen";
        }
    }
}

.selected {
    color:red;
}

        {{value}} {{getButtonLabel($index)}}

    Ausgewählt: {{selectedIndex}}