So bleiben CSS-Klassen von Angular-Controllern unberührt

In Angular (und im Allgemeinen) bin ich ein großer Fan davon, die Ansichtslogik außerhalb meiner Controller zu halten, und ich denke, dass dies bei der Verwendung von CSS-Klassen und ng-Klassen nicht der Fall ist.

Sie sind vielleicht nicht mit ng-class vertraut, es handelt sich um eine spezielle Direktive, die das Binden von Ausdrücken und deren Platzierung als Klassen von Elementen ermöglicht. Eine sehr häufige Verwendung von ng-class ist wie folgt:

<p ng-class="{{active}}">Class applied!</p><script>
    function MySimpleCtrl() {
        $scope.active = &#39;active&#39;;
        ...

Also legen wir im Controller die spezifische Klasse fest, die angezeigt werden soll; wir nehmen also an, dass wir eine Klasse „inaktiv“ haben – wir ändern einfach den Bereich Die Variable .active wird auf „inaktiv“ gesetzt und wir legen schließlich die Klasse in der Ansicht fest.

Aber ng-class ist noch besser:

ng-class akzeptiert drei verschiedene Arten von Werten:

1. String-Wert (Name der Klasse)

2. String-Array (anzuwendende Klasse)

3. Objekt + auszuwertender Ausdruck

Die Syntax von Option 3 sieht so aus

ng-class="{object of key/value pairs}[expression to evaluate]"

Grundsätzlich gilt: ng-class wertet den Ausdruck (in eckigen Klammern) aus und verwendet ihn dann als Schlüssel für das Objekt; der mit dem Schlüssel verknüpfte Wert ist die angewendete Klasse.

Dadurch können wir den $scope.active-Wert in einen echten Booleschen Wert umwandeln (genau so verwenden wir ihn) – ohne Ansichtslogik im Controller ist der Controller einfacher zu testen und kann wiederverwendet werden.

Hier ist ein einfaches Beispiel:

<p ng-class="{true: &#39;active&#39;, false: &#39;inactive&#39;}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

Wenn Sie eine Art bedingten Ausdruck (z. B. Umschalten) verwenden, können Sie eine andere, sehr ähnliche Syntax verwenden:

ng-class="{'selected': isSelected, 'blue': isBlue}"

Hier , wenn selected wahr ist, wird die ausgewählte Klasse angewendet, ebenso wie die blaue Klasse. Angular wendet so viel Realismus wie möglich an, sodass Sie die Klassen auf „Ausgewählt“ und „Blau“ setzen können.

Das obige ist der detaillierte Inhalt vonSo bleiben CSS-Klassen von Angular-Controllern unberührt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!