Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

CSS-Klasse eines HTML-Elements kontrollieren

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Klassen-Direktive dient in AngularJS dazu, die CSS-Klasse eines HTML-Elements zu kontrollieren.
03:21

Transkript

Ich habe euch hier ein kleines Beispiel vorbereitet, dass ich euch sehr gerne einmal erklären möchte, um auf Basis dessen euch die Direktive ngClass näherzubringen. Die ngClass Direktive, die dient dazu, dass wenn sie auf ein HTML-Element angewendet wurde, dass die CSS-Klasse dieses Elementes von dieser Direktive kontrolliert werden kann. In diesem Beispiel habe ich einen Textblock, und diesen Textblock möchte ich entsprechend dann von der Ausrichtung des Textflusses beinflussen. Klick ich also hier auf das mittlere Icon, wird dann alles zentriert, auf das rechte Icon - alles rechts wird gemacht und auf dem linken Icon - alles links wird gemacht Schauen wir uns mal im Inspektor einmal schnell dieses Element an! Dann erkennen wir hier auch wunderbar, die CSS-Klasse text-left, welche ich mir von bootstrap ausgebockt habe. In dem Moment, wo ich auf dem linken Objekt geklickt habe, klick ich in die Mitte, ist das hier text-center, klick ich rechts, ist es text-right. Das Ganze habe ich realisiert über ngClass, und lass uns das mal im clean-Code anschauen. Und dann werdet ihr sehen, dass das im Grunde genommen gar nicht weh tut, denn was ich hier habe, ist hier zunächst einmal, dass ich drei Schaltfächen generiert habe. Diese drei Schaltflächen, die ich generiert habe, die sorgen dafür, dass in dem Moment, wo ich auf die Schaltfläche hier jeweils klicke, über die Direktive ngClick die Eigenschaft textClass im Model auf den Wert text-left, text-center und text-right gesetzt wird. Das bedeutet also, wenn wir uns das laufende Beispiel hier noch mal mit der AngularJS-Erweiterung anschauen, dass wir hier erkennen können, dass wenn wir hier links klicken oder rechts klicken, die Eigenschaft textClass hier unten im Model einfach nur zwischen den Wert text-left, text-right und text-center hin und her toggelt. Zur Erinnerung, ich bin hingegangen und habe dann entsprechend diese Styles einfach aus Bootstrape heraus einfach mal ausgebockt, das heißt, text-left, text-right,text-center sind Bootstrap-Klassen, die dann entsprechend für die Textausrichtung dann dienen. Was ich jetzt dann machen muss, ist es einfach so unendlich einfach. Im Grunde genommen, ich habe hier die Direktive ngClass genommen und habe die Direktive ngClass nur noch gesagt, welchen Ausdruck ich entsprechend hier aus dem Model für die CSS-Klasse hier einbinden möchte, und das ist textClass. Zur Erinnerung noch mal, bitte, schaut mal, wenn ich hier entsprechend mir noch mal das Model angucke, dann sehen wir, dass textClass hier gesetzt wird, Das habe ich hier zur linken Zeil 181 mit ngClass gebunden, das heißt, in dem Moment, wo textClass den Wert text-center hat beziehungsweise der Wert textClass sich ändert, bekommt die ngClass-Direktive das mit und macht im Hintergrund nichts anderes als, dass es eingeht und die CSS-Klasse zugehörig dann hier einfach hinzubindet. In diesem Video haben wir also gemeinsam gelernt, wie wir mit der ngClass Direktive CSS-Klassen auf ein HTML-Element definieren können.

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!