Inhaltsverzeichnis
Die Art und Weise, wie wir mit unseren Anwendungen und deren Benutzeroberfläche arbeiten können, können Änderungen in den Stilen mit sich bringen. Diese Änderungen spiegeln sich hauptsächlich in den modernsten Anwendungen mit Änderungen in der Lektionen CSS der Elemente, damit können wir Farben platzieren, Anordnung ändern usw., unsere Elemente HTML.AngularJS ermöglicht es uns, diese Änderungen dynamisch vorzunehmen, wenn sich das Modell ändert, sodass wir das Aussehen der Anwendung als Ganzes mit ihrem Betrieb verknüpfen können. Dazu haben wir zwei Möglichkeiten, eine mit Interpolation und eine mit der Direktive ng-klasse.
Stellen wir uns in diesem Fall vor, dass wir a CSS-Klasse, wenn wir es zu einem bestimmten Zeitpunkt oder einer bestimmten Aktion auf unser Element anwenden möchten, können wir die Interpolationsnotation von verwenden Eckig {{}} damit Sie die Änderung mit einer Funktion anwenden können, die auf dem $ Umfang Regler.
Zum Beispiel haben wir eine Klasse, die ein Element grau anzeigt, um anzuzeigen, dass es nicht aktiv ist:
.menu-disabled-true {Farbe: grau; } Wenn wir es auf unsere Anwendung anwenden wollen, wissen wir, dass wir unser Element dazu bringen können, den Stand seiner Richtlinien zu übernehmen, wie wir beobachten:
- Deaktivieren
Jetzt machen wir den Inhalt unserer Javascript, hier werden wir die Eigenschaft ändern ist behindert Jedes Mal, wenn wir auf unser Element klicken:
Funktion MenuController ($-Bereich) {$-Bereich.isDisabled = false; $ Umfang. deaktivieren = Funktion () {$ scope.isDisabled = 'true'; }; } Jetzt sehen wir, wie es beim Starten der Anwendung aussieht:
Eine andere Möglichkeit, Stiländerungen anzuwenden, ist die Direktive ng-klasse, das ermöglicht uns ein wenig mehr Flexibilität, da wir die Funktionsweise ausnutzen können AngularJS so können wir Bedingungen auswerten und je nach Erfüllung die eine oder andere Klasse aufzeigen.
Sehen wir uns im folgenden Beispiel an, dass wir eine Warnungsklasse und eine Fehlerklasse haben wollen, damit können wir sogar verschiedene Meldungen anzeigen, damit der Benutzer weiß, was passiert. Wir haben die CSS-Klassen, die wir verwenden werden:
.error {Hintergrundfarbe: rot; } .Warnung {Hintergrundfarbe: gelb; } Jetzt erstellen wir die HTML, werden wir in der Richtlinie verwenden ng-klasse einige Eigenschaften Fehler: isError Ja Warnung: isWarningDiese Auswertungen ermöglichen es uns, die eine oder andere Klasse auszuwählen, die wir im CSS definiert haben.
Dann haben wir a {{Botschaft}} was den entsprechenden Wert anzeigt, den wir im Controller platzieren:
{{Botschaft}}Fehler simulieren Warnung simulierenSchließlich machen wir die Arbeit in Javascript:
Funktion ClassesController ($-Bereich) {$-Bereich.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Dies ist ein Fehler!'; $ scope.isError = true; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Nur eine Warnung.'; $ scope.isWarning = true; $ scope.isError = false; }; } Damit erreichen wir dann in unserem Browser ein Ergebnis wie das folgende:
VERGRÖSSERN
