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 Grundkurs

Listen einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
AngularJS ermöglicht es, Bindungen zu einer Liste herzustellen. Diese muss mit Hilfe einer Schleife, welche durch die Listenelemente iteriert, visualisiert werden.
05:01

Transkript

Natürlich erlaubt es mir AngularJS nicht nur einzelnen Bindungen zu bestimmten Variablen innerhalb meines Scopes, sondern ich bin auch in der Lage, dann entsprechend eine Bindung zu machen zu einer Liste in meinem Scope. Diese Liste muss dann natürlich visualisiert werden und das bekomme ich natürlich dann nicht auf die einfache Art und Weise hin, dass ich zwei geschweifte Klammern einfach verwende und dann zuweise, sondern muss eine Schleife bauen und diese Schleife muss durch die Listenelemente iterieren und dann entsprechend die Werte dort anzeigen. Hört sich alles wahnsinnig kompliziert an, wenn Ihr aber gleich gemeinsam mit mir Euch anschaut, wie das ausschaut, wenn man es dann umsetzt, seht Ihr wie unendlich einfach das ist. Was ich mit Euch gemeinsam jetzt hier machen möchte, ist schnell wieder eine neue Variable zu definieren. Die Variable, die ich definiere, ist von einer Liste von Personen, also nennen ich sie persons und diese Liste von Personen ist dann ein Array und das Array selber beherbergt dann einzelnen Objekte, wobei jedes einzelne Objekt dann entsprechend hier einen Namen hat und einen Wert für ein Alter. Das Ganze werde ich jetzt mit ein paar weiteren Objekten bereichern. Ihr werdet es mir nachsehen, dass ich jetzt hier ein wenig faul bin und dann entsprechend einfach nur durchnummeriere. Gleich fertig. Als nächstes wechsle ich jetzt zurück zu meiner HTML-Seite und in meiner HTML-Seite selber erzeuge ich dann entsprechend jetzt hier einen Liste. Das myVariable will ich gerne hier behalten, dann haben wir es nicht umsonst gemacht. Jetzt ist die Bindung in einem Überschriftsknoten drinnen und kann dann anschließend jetzt hier meine erste Liste erstellen. Als Klasse verwende ich hier innerhalb meiner Liste von bootstrap das unstyled. Jedes einzelne Listenelement, das ich dann jetzt hier erzeuge, soll jetzt immer ein Element dieser Personenliste beherbergen. Damit das Ganze funktioniert, verwende ich die Direktive, also das Attribut ng-repeat. Das ng-repeat macht jetzt an dieser Stelle nichts anderes als eine Schleife zu initialisieren. Das heißt, innerhalb des Scopes kann ich jetzt auf eine Variable zurückgreifen, die persons heißt. Ich schaue noch einmal, ob ich mich nicht vertippt habe und iteriere dann durch diese Liste und jedes Element, das dann aus dieser Liste ausgelesen wird, lasse ich jetzt in die Variable person schreiben. Gelesen bedeutet das Ganze dann, wiederhole innerhalb der Liste alle Elemente und weise dies dem Parameter person zu. Also repeat person in persons. Bedeutet das jetzt automatisch für jedes dieser Elemente, die ich in dieser Liste habe, eine Eigenschaft person definiert wird innerhalb dieses Scopes, das ich direkt verwenden kann. Ich kann jetzt also ohne weiteres jetzt hier einfach auf eines der aktuellen Personen zurückgreifen und kann innerhalb dieser Personen dann beispielsweise den Wert name, den ich hier definiert habe, dann zuweisen lassen. Wenn wir das Ganze jetzt einmal aktualisieren, sehen wir da wunderbar, dass wir dann AngularJS rocks hier stehen haben, genauso wie wir es hier wollten und hat er dann durch die einzelnen Elemente dann durchiteriert, indem er hier entsprechend hans1, hans2, hans3 und q dann darstellt und genauso haben wir es hier hinzugefügt. Wenn wir jetzt hier an dieser Stelle einfach statt hans saban machen, speichern das Ganze. Aktualisieren das Ganze, dann seht Ihr, dass das wunderbar funktioniert auch an dieser Stelle. In diesem Video habt Ihr also gelernt, wie man sehr einfachen Mitteln in der Lage ist, durch eine Liste zu iterieren mit AngularJS und dafür zu sorgen, dass dann ein bestimmtes HTML-Element so oft abgelegt bzw. erstellt wird, wie es Elemente in der Liste gibt. Dabei wird dann immer für das aktuelle Element einer Instanz bzw. einer Variable definiert und diese kann ich dann in diesem HTML-Element verwenden, um dort Eigenschaften aus dem jeweiligen Objekt der Liste dann entsprechend visualisieren zu können oder anderweitig damit weiterzuarbeiten.

AngularJS Grundkurs

Arbeiten Sie sich in AngularJS, einem JavaScript-Framework von Google, ein und sehen Sie, wie Sie mit MVC-Design-Pattern und Dependency Injection im HTML-Umfeld arbeiten können.

3 Std. 43 min (44 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!