AngularJS ngClass bedingt

499

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.

Ryanzec
quelle
Schauen Sie sich diese Antwort an: stackoverflow.com/questions/14788652/…
Adrian Neatu
43
Klassen mit Bindestrichen müssen zitiert werden:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"
Brent Washburne
2
Wir können mehr Bedingungen mit ng-Klasse verwenden, siehe auf diesem Blog goo.gl/qfEQZw
virender
1
Siehe auch
AlikElzin-kilaka
"Klassen mit Strichen brauchen Wimpern '' '' '' '"
Richard

Antworten:

596

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'}"
Bertrand
quelle
2
Danke, aus welchem ​​Grund auch immer, ich dachte, weil dies ein Ausdruck als Wert des Objekts war, musste das Ganze in Anführungszeichen stehen.
Ryanzec
8
Umschließen Sie den Klassennamen mit " 'Andernfalls", wenn Sie weitere Klassen hinzufügen möchten oder wenn Ihre Klasse Bindestriche oder Unterstriche enthält, funktioniert dies nicht. ng-class="{'test test-2: obj.value1 === 'value'}"
Andrea Turri
6
@Andrea, Sie haben das Schlusszitat vergessen: ng-class="{'test test-2': obj.value1 === 'value'}"
ErikE
Verwenden Sie für Angular2 (das ich zu finden versucht habe) Attribute wie : [class.test]="obj.value1 == 'someotervalue'".
Kub1x
Zu Ihrer Information an die Leser, Sie können auch Klammern haben. ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }
daCoda
227

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.

Abhi
quelle
Perfektes Beispiel mit mehreren Klassen, Danke!
Sreekanth Karini
112

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

Kaushal Khamar
quelle
1
Was ist der Status hier?
CommonSenseCode
Der Status ist ein Wert, den Sie überprüfen oder validieren möchten, je nachdem, welche Klasse angewendet wird.
Kaushal Khamar
4
So, weil es flexibler und weniger verrückt ist, wenn es um mehrere Werte geht
Eduardo La Hoz Miranda
Wie wäre es mit der Verwendung für mehrere Klassen. Wie <div ng-class = "{0: 'eins', 1: 'zwei', 2: 'drei'} [Status], {0: 'eins', 1: 'zwei'} [Status1]"> </ div>
parth.hirpara
1
können wir dies in einem solchen Fall verwenden wie: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>
Chandra Kant Paliwal
80

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).

AlikElzin-Kilaka
quelle
1
Schöne, alles erstaunliche Beispiele, aber ich mag deine am meisten!
Stormec56
48

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

Nimantha Harshana Perera
quelle
2
Dieser Typ versteht es. Danke Knospe
deepakgates
36

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.

Subhransu
quelle
36

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.

aamir sajjad
quelle
1
Nett! Außerdem können Sie in ng-repeat $ sogar verwenden, um die Klasse festzulegen. ZB ng-class = "$ gerade? 'Gerade': 'ungerade'". Andere raffinierte Bools innerhalb der ng-Wiederholung sind $ first, $ last, $ even, $ odd ...
Max
15

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 ";
  }     
}
Razan Paul
quelle
2
Ich denke, das vermischt die Bedenken. Ein Controller sollte abstrakter sein und sich nicht um CSS-Klassen kümmern, sondern den Status. Basierend auf dem Status sollten die CSS-Klassen in der Vorlage angewendet werden. Auf diese Weise ist der Controller unabhängig von der Vorlage und leichter wiederverwendbar.
Hubert Grzeskowiak
9

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>
Saeed
quelle
aber wenn ich 3 oder mehr Bedingungen habe, würde das nicht funktionieren? da dies nur wahre und falsche Bedingungen zurückgibt
Ali Al Amine
Bedingungen bedeutet wahr oder falsch. Du meinst etwas mit mehr als 2 Werten ?? @AlyAlAmeen
Saeed
7

Verwenden Sie dies für Angular 2

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>
Ninad Kulkarni
quelle
Um dies zu erweitern, wenden Sie für Angular 2 eine Klasse und auch einen Klassenmodifikator in einer if / else-Bedingung an, indem Sie ein Array wie das folgende verwenden:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"
Matt Rabe
5

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>
Vinit Solanki
quelle