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

AngularJS 1.3 Grundkurs

HTML-Knoten im DOM anpassen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Switch-Direktive passt den angezeigten HTML-Knoten innerhalb des DOM entsprechend dem Wert eines zuvor definierten Ausdrucks an.
04:56

Transkript

Ich habe euch hier ein kleines Beispiel vorbereitet, mit dem ich euch gerne die ng-switch-Direktive etwas näher bringen möchte. In diesem Beispiel sehe ich hier, dass ich auf der rechten Seite die Auswahl eines Geschlechtes habe mit einer Radio-Groupe für männlich und weiblich, und zu meiner linken habe ich den Ausdruck "Mann und Frau". Im Quellcode, den ich auf der anderen Seite sehe, kann ich erkennen, dass ich hier von Zeile 45 bishin zu 89 einen Switch-Block definiert habe, und dieser Switch-Block enthält eben hier diesen Ausdruck "Mann und Frau", den wir so eben hier innerhalb der HTML-Welt sehen. Wenn wir uns nun das Ganze einmal anschauen innerhalb der Extension von Angular, dann sehen wir, dass hier das Batarang, wenn ich es aktiviere, mir folgende Information anzeigt. Der sagt mir hier, dass ich im zweiten Scope ein Model habe, und in diesem Model ist den Wert username gleich Saban Unlü versehen. Ansonsten sehe ich hier gar nichts, Nun werde ich aber an dieser Stelle bei der Geschlechtsauswahl mal auf "männlich" klicken. Daraufhin erkennt ihr nun,dass der Ausdruck "Mann" hier steht, und zusätzlich im Model die Eigenschaft sex hinzugekommen ist mit dem Wert man. Klicke ich hier auf "weiblich", ändert der Ausdruck sich in "Frau" und sex ändert sich in woman. Was nun weiterhin zu erkennen ist, ist es, wenn ich mir mal die Elemente hier anschaue und mir einfach mal explizit hier diese Frau hier ansehen möchte, dass ich den span-Knoten, den ich hier rechts habe mit der "Frau" hier wunderbar erkennen kann. Zusätzlich erkenne ich hier das Angular sich selber quasi als Hilfestellung, die Information hier hinzugefügt hat, dass dieser Block hier angezeigt werden soll, wenn woman entsprechend der Wert für sex ist. Ich sehe auch ein Kommentarfeld hier, dass der Platzhalter dafür ist, damit AngularJS weiß, wo es entsprechend DOM-Element hinzufügen muss, wenn der Wert sex man wird. Klicke ich also nun auf "männlich", könnt ihr sehen, dass das hier unten toggelt, und der span-Knoten hier mit dem Wert Mann dargestellt wird, und für woman hier nun noch der Platzhalter durch den Kommentar definiert ist. Ebenso übrigens auch der Platzhalter für ng-switch-default, das heißt, für den Standardwert. Der Standardwert wird dann gesetzt in dem Moment, wo sex selber noch nicht definiert ist, wie wir hier wunderbar erkennen können, dann haben wir hier den span mit dem Ausdruck "Mann und Frau", der dann aktiv sein wird. Gucken wir uns jetzt im Quellcode mal an, wie das Ganze aussieht ohne Kommentare! Sehen wir, dass wir hier den div-Knoten haben. Und in diesem div-Knoten befinden sich weitere Knoten, aber entscheidend ist, dass der HTML-Knoten hier mit der Direktive ng-switch und dem Ausdruck sex verbunden ist. Das sorgt jetzt dafür, dass innerhalb dieses HTML-Knotens abhängig von der Änderung der Eigenschaft sex etwas passieren soll. Und zwar soll passieren, dass der DOM manipuliert wird, und zwar so ein DOM-Element hinzugefügt beziehungsweise entfernt werden abhängig davon, wenn ein switch-Wert einen bestimmten Wert enthält. Und wenn wir uns hier mal ng-switch-when angucken, ist das im Grunde genommen eine Direktive, die gemeinsam mit ng-switch arbeitet, dafür sorgt, dass dieser Knoten hier angezeigt wird in dem Moment, wo die Eigenschaft sex den Wert man enthält. Im Fall soll dieser Knoten dargestellt werden, wo die Eigenschaft sex den Wert woman hat. Und die Direktive ng-switch-default sorgt dafür, dass diese HTML-Knoten angezeigt wird, sollte die Eigenschaft sex weder dem Wert man noch woman haben oder beispielsweise die bei uns in unserem Fall am Anfang an die fahren sollen. Das ist im Grunde genommen schon die einzige Magie, die es hier gibt, das heißt, abhängig von der Eigenschaft sex werden einfach DOM-Elemente hinzugefügt beziehungsweise entfernt, und den Wert sex, den habe ich im Grunde genommen hier, lediglich darüber definiert, dass ich eine Radio-Groupe gemacht habe mit radio-buttons Und bei dem radio-button gehe ich hin und binde mit der Direktive ng-model die Eigenschaft sex. Und sollte dann der radio-button "männlich" angeklickt sein, wird dann die Eigenschaft sex mit dem Wert man versehen. Und sollte ich "weiblich" anklicken, wie die Eigenschaft sex mit dem Wert woman versehen. Das ist im Grunde genommen schon die einzige Magie, die wir hier haben, wie unsere ng-switch-Beispiel hier funktioniert. Und wir haben gemeinsam in den vergangenen Minuten gelernt, wie wir in der Lage sind, mittels ng-switch,ng-switch-when HTML-Knoten abhängig von bestimmten Wertigkeiten ein- und auszublenden. Im Grunde genommen ist das eigentlich nichts anderes als der klassische switch-Block, den wir aus der normalen Programmierung kennen.

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!