AngularJS 1.3 Grundkurs

Änderungen überwachen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video bietet einen Überblick über eine Direktive, um auf Änderungen in einem Texteingabefeld sowie die Aktivierung einer Checkbox entsprechend zu reagieren.
02:38

Transkript

In diesem Video möchte ich euch einmal demonstrieren, dass wir mit der Direktive ng-change in der Lage sind, auf Änderungen zu reagieren. Die Änderungen können zum Beispiel einmal innerhalb des Input-Textfeldes sein, wie wir es hier in diesem Fall haben. Das kann aber auch durchaus eine Änderung sein, die ich registrieren möchte in dem Moment, wo eine Checkbox betätigt wird, würde theoretisch auch mit dem radio button gehen, den ich jetzt hier aber nicht als Sample habe, aber ich habe hier zusätzlich noch mal ein select- Menü drin, indem ich dann ebenfalls eine Auswahl tätigen kann, und hier kann ich dann mit ngChange entsprechend darauf reagieren, wenn eine Änderung stattgefunden hat. Was ich mache, wenn eine Änderung passiert? Es ist im Grunde genommen relativ einfach. Ich habe hier die Methode captureChange. Die captureChange Methode ist extrem primitiv eigentlich. Die machts nichts anderes als ein console.log und dann bescheid zu sagen: "Hey, eine Änderung wurde erfasst!" Lass uns das also einfach mal schauen, wie das Ganze funktioniert. Dann habe ich hier das Sample aufgemacht. Ich sehe auch gerade, dass ich hier Mausereignisse noch drin stehen habe. Wartet bitte! Das sind natürlich keine Mausereignisse. Das sind Änderungsereignisse. Und noch mal! Da haben wir Änderungsereignisse. In dem Moment, wo ich jetzt hier anfange im Text-Input-Feld etwas zu tippen, bekomme ich für jeden Buchstaben entsprechend hier eine Änderung registriert. Aktiviere ich die Checkbox, beziehungsweise, die aktiviere ich, die bekomme ich ebenfalls eine Anderung mit. Und wenn ich hier, die Auswahl hin und her wechsele, bekomme ich dann auch immer mit, wenn dann eine Änderung stattgefunden hat. Das Ganze mache ich, wie gesagt, über ng-change. Spannend ist hier an dieser Stelle auch zu erkennen, dass wenn ich einmal die Angular-Erweiterung hier aktiviere, das wir hier sehen können, dass dann alle Änderung, die ich hier erzeugt habe, dann auch entsprechend im Model gespeichert wurde, sowohl beispielsweise im Model die search-Eigenschaft definiert, weil ich hier im Input-Text-Feld hier search definieren möchte. isChecked wurde dann entsprechend über die Checkbox definiert. Und currSelection wurde hier über das dropdown-Menü gesetzt. Würde ich also hier was ändern, ändert sich auch ganz fix mein Model, wie ihr hier seht. Und im weitesten Sinne ist das eigentlich ein tolles Tool, womit ich mein Model observieren kann. Was haben wir also hier gelernt? Wir haben gelernt, dass wir die Direktive ng-change verwenden können, um erkennen zu können, wenn ein User eine Änderung innerhalb der View mit dem Modell durchgeführt hat.

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!