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

AngularJS 1.3 Grundkurs

Bidirektionale Bindungen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Definition einer bidirektionalen Bindung über eine entsprechende Direktive dient in AngularJS dazu, eine Eigenschaft innerhalb eines Models über die View zu aktualisieren.
02:32

Transkript

In diesem Video möchte ich euch gerne demonstrieren, ihr mit der Direktive ng Modell in der Lage seid, Eingenschaften innerhalb eines Modells über die View zu aktualisieren. Um das Ganze zu realisieren, habe ich ein kleines für uns vorbereitet. Und zwar, habe ich hier einen Controller, der sich UserController nennt, und ich habe in diesem Controller über den Scope hier an der Stelle eine Eigenschaft username definiert. Die Eigenschaft username habe ich mit dem Wert Saban Unlü definert, und habe ich hier in einem Überschriftsknoten den Usernamen gebunden. Als nächstes möchte ich euch zeigen, dass ich auch in der Lage bin, das Ganze dann hier in einem Input-Feld zu verwenden, und zwar schnappe ich mir hier das Input-Feld von Typ text. Und diesmal binde ich username über ng-model, und zwar mit dem username. Und das, was jetzt an dieser Stelle passieren wird, ist folgendes: Ich habe hier ein Input-Feld. Dieses Input-Feld habe ich mit der Direktive ng-model so gebunden, dass initial erst mal die Direktive dafür sorgt, dass geschaut wird:Hey ist einen Username definiert? Ja oder Nein? Sollte das der Fall sein, wird entsprechend der Value - Wert von Input - mit dem Wert verbunden, der momentan im Scope zu der Eigenschaft passt. Das wäre dann Saban Unlü. Weiterhin sorgte die Direktive dafür, dass Change Event Handler dann registriert werden, und wenn ich dann anfange, in dem Text-Feld etwas einzugeben, dann wird automatisch im Modell eine Aktualisierung vorgenommen, das heißt, innerhalb des Scopes wird Username dann tatsächlich auch aktualisiert. Das wird zur Folge haben, dass durch die Aktualisierung die permanente Bindung hier von username sich mitaktualisieren wird. Testen wir jetzt das Ganze einmal, werden wir sehen, dass wir hier ein Input-Text-Feld haben. Dieses Input-Text-Feld befindet sich hier direkt unter der Überschrift. Und sobald ich jetzt anfange, etwas zu tippen, wird dann auch die Überschrift automatisch aktualisiert. Hätte ich an dieser Stelle bei der Bindung, zum Beispiel, statt der normalen Bindung eine einmalige Bindung definiert, hätte dies zur Folge gehabt, dass hier der obere Wert sich gleich aktualisieren wird, der untere aber durch die einmalige Bindung nicht mehr. Auf dieser Art und Weise bin ich jetzt also in der Lage, innerhalb des Models Eigenschaften zu beeinflussen direkt über die View, ausschließlich über die Direktive ng-model.

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!