AngularJS
ng-class Direktive

Drei Arten von NG-Klassenausdrücken

Angular unterstützt drei Arten von Ausdrücken in der Direktive ng-class .

1. String

<span ng-class="MyClass">Sample Text</span>

Durch die Angabe eines Ausdrucks, der eine Zeichenfolge ergibt, wird Angular aufgefordert, ihn als $ scope-Variable zu behandeln. Angular überprüft den $ scope und sucht nach einer Variablen namens "MyClass". Der in "MyClass" enthaltene Text wird zum tatsächlichen Klassennamen, der auf diesen <span> angewendet wird. Sie können mehrere Klassen angeben, indem Sie jede Klasse durch ein Leerzeichen trennen.

In Ihrem Controller haben Sie möglicherweise eine Definition, die wie folgt aussieht:

$scope.MyClass = "bold-red deleted error";

Angular wird den Ausdruck MyClass auswerten und die Definition des Bereichs $ finden. Es werden die drei Klassen "fett-rot", "gelöscht" und "Fehler" auf das <span> -Element angewendet.

Wenn Sie Klassen auf diese Weise angeben, können Sie die Klassendefinitionen in Ihrem Controller problemlos ändern. Beispielsweise müssen Sie möglicherweise die Klasse basierend auf anderen Benutzerinteraktionen oder neuen Daten ändern, die vom Server geladen werden. Wenn Sie viele Ausdrücke zum Auswerten haben, können Sie dies auch in einer Funktion tun, die die endgültige Liste der Klassen in einer $scope Variablen definiert. Dies kann einfacher sein, als zu versuchen, viele Auswertungen im ng-class Attribut in Ihrer HTML-Vorlage zusammenzufassen.

2. Objekt

Dies ist die am häufigsten verwendete Methode zum Definieren von Klassen mit ng-class da Sie leicht Auswertungen angeben können, die die zu verwendende Klasse bestimmen.

Geben Sie ein Objekt an, das Schlüsselwertpaare enthält. Der Schlüssel ist der Klassenname, der angewendet wird, wenn der Wert (eine Bedingung) als wahr ausgewertet wird.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. Array

Mit einem Ausdruck, der zu einem Array ausgewertet wird, können Sie eine Kombination aus Zeichenfolgen (siehe Nr. 1 oben) und bedingten Objekten (Nr. 2 oben) verwenden.

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

Dadurch wird ein Texteingabefeld erstellt, das an die Gültigkeitsbereichsvariable UserStyle gebunden ist, wodurch der Benutzer beliebige Klassennamen UserStyle . Diese werden dynamisch als Benutzertypen auf das <p> -Element angewendet. Auch kann der Benutzer auf das Kontrollkästchen klicken , die an die Datengebunden ist warning Umfang variabel. Dies wird auch dynamisch auf das <p> -Element angewendet.