Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

AngularJS 1.3 Grundkurs

Sichtbarkeit steuern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
AngularJS verfügt über zwei unterschiedliche Direktiven, um die Sichtbarkeit von HTML-Elementen zu steuern.
02:55

Transkript

ngHide und ngShow sind zwei Direktiven, die es euch ermöglichen, bestimmte HTML-Elemente sichtbar oder unsichtbar zu schalten. Dabei ist es immer davon abhängig, ob der Ausdruck der Direktive einen wahren Wert enthält. Das bedeutet, wenn ngHide den Wert true enthalten würde, dann würde das Objekt unsichtbar geschaltet werden, wenn ngHide darauf angewendet wurde. Und umgekehrt, wenn der Wert true ist für ngShow, wird dann ein HTML-Element sichtbar gemacht, dass gegebener Fall es zuvor und sichtbar war. Ich habe hierfür ein kleines Beispiel für euch vorbereitet. Und bei diesem Beispiel geht es dadrum, dass ich, wie ihr hier sehen könnt, "einen jungen Mann" hier zu Gesicht bekomme. Und wenn ich jetzt hier die Checkbox v aktiviere, dann werdet ihr sehen, dass automatisch dann hier ein Bildwechsel stattgefunden hat, dieser Bildwechsel, den habe ich einfach dadurch simuliert, dass ich hingegangen bin, und an dieser Stelle ngHide und ngShow verwendet habe und damit zwei HTML-Elemente im Grunde genommen nur in Abhängigkeit sichtbar oder unsichtbar schalte. Schauen wir uns einmal hier an dieser Stelle die AngularJS-Eigenschaften an! Dann werden wir hier hier sehen, dass wir im Scope selber die Eigenschaft haben loadingPercent. Das ist noch ein Relikt. Bitte, ignoriert den! Aber, wenn ich jetzt hier auf "Frau" drauf klicke, wird "isWoman" entsprechend hier auf true gesetzt. Deaktiviere ich das, ist "isWoman" false. Und lasst uns mal, in dem HTML-Quelltext schauen, und dann seht ihr, dass ich in dem oberen Bild ein ngHide verwende, das heißt, dieses Bild wird unsichtbar geschaltet, in dem Moment, wo "isWoman" true ist. Und das untere Bild habe ich mit ngShow versehen, das heißt, dieses HTML-Element wird nur sichbar geschaltet, wenn die Eigenschaft "isWoman" innerhalb des Scopes oder besser gesagt des Models true ist. Auf die Art und Weise kann ich sehr schön eigentlich zwei Bildobjekte, die ich habe, hin und her toggeln lassen, indem ich sie sichtbar oder unsichtbar schalte. Beim sichtbar oder unsichtbar Schalten erkennen wir hier auch wunderbar, wenn wir mal das Element untersuchen, dass die CSS-Klasse ngHide verwendet wird, wenn entsprechend ein Bild unsichtbar ist. Und dieses ngHide toggelt quasi einfach nur von einem Objekt zum anderen, das heißt, ngHide selber und ngShow teilen sich quasi die ngHide-CSS-Klasse. Und das ist im Grunde genommen relativ simple, wie das ganze Szenario hier funktioniert. Und das ermöglicht es euch, sehr schnell Einzelheit der HTML-Elemente sichtbar und unsichtbar zu schalten.

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
Ihr(e) Trainer:
Erscheinungsdatum:19.11.2014
Laufzeit:4 Std. 15 min (74 Videos)

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!