Gibt es eine Möglichkeit, einen Ausdruck für so etwas wie ng-classeine Bedingung zu machen?

Zum Beispiel habe ich Folgendes versucht:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

Das Problem mit diesem Code ist, dass obj.value1der Klassentest unabhängig davon immer auf das Element angewendet wird. Dies tun:

<span ng-class="{test: obj.value2}">test</span>

Solange obj.value2dies nicht einem Wahrheitswert entspricht, wird die Klasse nicht angewendet. Jetzt kann ich das Problem im ersten Beispiel folgendermaßen umgehen:

<span ng-class="{test: checkValue1()}">test</span>

Wo die checkValue1Funktion so aussieht:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Ich frage mich nur, ob das so funktionieren ng-classsoll. Ich baue auch eine benutzerdefinierte Direktive auf, in der ich etwas Ähnliches tun möchte. Ich kann jedoch keinen Weg finden, einen Ausdruck zu sehen (und vielleicht ist das unmöglich und der Grund, warum es so funktioniert).

Hier ist ein Plnkr, um zu zeigen, was ich meine.

Ihr erster Versuch war fast richtig. Es sollte ohne die Anführungszeichen funktionieren.

{test: obj.value1 == 'someothervalue'}

Hier ist ein plnkr .

Die ngClass-Direktive funktioniert mit allen Ausdrücken, die wahrheitsgemäß oder falsch bewerten. Sie ähneln den Javascript-Ausdrücken, können jedoch mit einigen Unterschieden hier gelesen werden . Wenn Ihre Bedingung zu komplex ist, können Sie eine Funktion verwenden, die wie bei Ihrem dritten Versuch wahr oder falsch zurückgibt.

Nur zur Ergänzung: Sie können auch logische Operatoren verwenden, um logische Ausdrücke wie zu bilden

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Verwenden der ng-Klasse in ng-repeat

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

Für jeden Status in task.status wird eine andere Klasse für die Zeile verwendet.

Angular JS bietet diese Funktionalität in der ng-class-Direktive . In die Sie eine Bedingung setzen und auch eine bedingte Klasse zuweisen können. Sie können dies auf zwei verschiedene Arten erreichen.

Typ 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

In diesem Code wird die Klasse entsprechend dem Wert des Statuswerts angewendet

wenn Statuswert ist 0 dann gilt Klasse ein

wenn Statuswert ist 1 dann gilt Klasse zwei

wenn Statuswert 2 dann gilt Klasse drei

Typ 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

In welcher Klasse wird nach Statuswert angewendet

wenn Statuswert 1 oder wahr , dann wird es Klasse hinzufügen test_yes

wenn Statuswert 0 oder falsch , dann wird es Klasse hinzufügen test_no

Ich sehe oben großartige Beispiele, aber alle beginnen mit geschweiften Klammern (json map). Eine andere Möglichkeit besteht darin, ein Ergebnis basierend auf der Berechnung zurückzugeben. Das Ergebnis kann auch eine Liste von CSS-Klassennamen sein (nicht nur Map). Beispiel:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

oder

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Erläuterung: Wenn der Status aktiv ist, wird die Klasse enabledverwendet. Andernfalls wird die Klasse disabledverwendet.

Die Liste []wird für die Verwendung mehrerer Klassen verwendet (nicht nur einer).

Es gibt eine einfache Methode, die Sie mit dem HTML-Klassenattribut und der Kurzform if / else verwenden können. Keine Notwendigkeit, es so komplex zu machen. Verwenden Sie einfach die folgende Methode.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

Viel Spaß beim Codieren, Nimantha Perera

Ich werde Ihnen zwei Methoden zeigen, mit denen Sie ng-class dynamisch anwenden können

Schritt 1

Mit dem ternären Operator

<div ng-class="condition?'class1':'class2'"></div>

Ausgabe

Wenn Ihre Bedingung erfüllt ist, wird Klasse1 auf Ihr Element angewendet, andernfalls wird Klasse2 angewendet.

Nachteil

Wenn Sie versuchen, den bedingten Wert zur Laufzeit zu ändern, wird die Klasse irgendwie nicht geändert. Daher empfehle ich Ihnen, Schritt 2 zu wählen, wenn Sie Anforderungen wie einen dynamischen Klassenwechsel haben.

Schritt 2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Ausgabe

Wenn Ihre Bedingung mit Wert1 übereinstimmt, wird Klasse1 auf Ihr Element angewendet. Wenn Übereinstimmungen mit Wert2 übereinstimmen, wird Klasse2 angewendet und so weiter. Und dynamischer Klassenwechsel funktioniert gut damit.

Hoffe das wird dir helfen.

Die Winkelsyntax besteht darin, den Operator : zu verwenden, um das Äquivalent eines if- Modifikators auszuführen

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Fügen Sie geraden Zeilen eine Clearfix-Klasse hinzu. Trotzdem kann Ausdruck alles sein, was wir unter normalen Bedingungen haben können, und er sollte entweder als wahr oder falsch bewertet werden.

Die Verwendung der Funktion mit der ng-Klasse ist eine gute Option, wenn jemand eine komplexe Logik ausführen muss, um die entsprechende CSS-Klasse zu bestimmen.

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

JavaScript :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

benutze das

<div ng-class="{states}[condition]"></div>

Wenn die Bedingung beispielsweise [2 == 2] ist, sind die Zustände {true: '...', false: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Verwenden Sie dies für Angular 2

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-classist eine Richtlinie von AngularJs. Hier können Sie "String Syntax", "Array Syntax", "Evaluated Expression", "Ternary Operator" und viele weitere unten beschriebene Optionen verwenden:

ngClass Verwenden der Zeichenfolgensyntax

Dies ist der einfachste Weg, ngClass zu verwenden. Sie können der ng-Klasse einfach eine Winkelvariable hinzufügen. Dies ist die Klasse, die für dieses Element verwendet wird.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

Demo-Beispiel für ngClass mit String-Syntax

ngClass Verwenden der Array-Syntax

Dies ähnelt der Zeichenfolgensyntaxmethode, außer dass Sie mehrere Klassen anwenden können.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass Verwenden des ausgewerteten Ausdrucks

Eine fortgeschrittenere Methode zur Verwendung von ngClass (und eine, die Sie wahrscheinlich am häufigsten verwenden werden) besteht darin, einen Ausdruck auszuwerten. Dies funktioniert so, dass trueSie eine bestimmte Klasse anwenden können , wenn eine Variable oder ein Ausdruck ausgewertet wird . Wenn nicht, wird die Klasse nicht angewendet.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Beispiel für ngClass mit ausgewertetem Ausdruck

ngClass Using Value

Dies ähnelt der ausgewerteten Ausdrucksmethode, außer dass Sie nur mehrere Werte mit der einzigen Variablen vergleichen können.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass Verwenden des ternären Operators

Mit dem ternären Operator können wir mit der Kurzform zwei verschiedene Klassen angeben, eine, wenn ein Ausdruck wahr ist, und eine für falsch. Hier ist die grundlegende Syntax für den ternären Operator:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Bewertung der ersten, letzten oder bestimmten Nummer

Wenn Sie die ngRepeatDirektive verwenden und Klassen auf die first, lastoder eine bestimmte Nummer in der Liste anwenden möchten , können Sie spezielle Eigenschaften von verwenden ngRepeat. Dazu gehört $first, $last, $even, $odd, und ein paar andere. Hier ist ein Beispiel für die Verwendung dieser.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>