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>