AngularJS 1.3 Grundkurs

HTML-Knoten ein- und ausblenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Verwendung der If-Direktive dient dazu, bestimmte HTML-Konten abhängig von der Erfüllung einer zuvor definierten Bedingung ein- oder auszublenden.
02:46

Transkript

Lasst mich euch in den nächsten Minuten mal die Direktive ng-if zeigen! Die ngIf-Direktive finde ich persönlich nämlic sehr cool, denn sie ermöglicht es euch, bestimmte HTML-Knoten nur anzuzeigen, wenn die if-Bedingung selber eine wahre Eigenschaft enthält, das heißt, ich kann hier einfach ng-if verwenden und kann zum Beispiel die Eigenschaft showImg hier definieren. Die showImg Eigenschaft werde ich jetzt fix mal hier hinzufügen in meinem Scope mit dem Wert true. Und wenn ich nun das Ganze hier mal teste, dann seht ihr wunderbar, dass hier das Bild zu sehen ist. Und nun, wechsle ich wieder zurück und werde hier bei meinem Link dafür sorgen, dass durch ein ng-click die showImg Eigenschaft auf false gesetzt wird. Und jetzt schaut mal, was passiert, wenn wir uns jetzt mal anschauen! Es wird angezeigt das Bild. Ich klicke drauf, und es verschwindet das Bild. Wenn wir einmal nach dem Href kurz schauen, wie die Elemente angeordnet sind dann sehen wir, dass hier per Information ein Kommentar enthalten ist, dass dann sagt: Hey, dieser Block hier beinhaltet ein ng-if-Block, das abhängig ist von der Bindung ShowImg. Und ng-if ist hiermit showImg registriert. Klicke ich jetzt hier drauf und showImg wird false. Schaut mal, was dann passiert! Geht wirklich hin und entfernt das komplette DOM-Element. Ihr habt ein absolut saubres, vernünftig aufgebautes Element hier, das an dieser Stelle schlecht unergreifen nichts anderes macht als zu sagen, hier im Platzhalter sollte showImg wieder true werden. Dann bin ich bereit in diese Stelle dann das Template einzupacken, das dazu gehört. Das möchte ich euch jetzt einmal demostrieren. Dafür schnappe ich mir hier mal den button nochmal und werde ich hier false dazu schreiben, hier true So mache einen zweiten button und lade das jetzt einmal neu mit true und false, dann mache ich jetzt "Element untersuchen". Klicke ich hier drauf. Dann sehe ich, dass das HTML-Element verschwunden ist, klicke ich auf true, wird dann in gleicher Stelle das HTML-Element dann wieder reingepackt In diesem Video haben wir also gesehen, dass ng-if in der Lage istm komplette HTML-Elemente aus dem DOM hinaus oder wieder hinein zu hängen, abhängig davon, ob der Ausdruck wahr ist oder nicht.

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!