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

AngularJS 1.3 Grundkurs

Listen darstellen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS verfügt mit der Repeat-Direktive über eine Option, um einen HTML-Knoten als Vorlage zur Darstellung von Listeneinträgen zu nutzen.
03:03

Transkript

Eine ST der Direktiven, die mein Herz gewonnen haben, als ich damals mit AngularJS angefangen habe, war ngRepeat, ngRepeat ist eine Direktive, die es mit ermöglicht, durch eine Liste zu iterieren und ein HTML-Element, auf dem ich dann entsprechedn ngRepeat angewendet habe, wrd wird dann als Template verwendet, um dann die jeweiligen Element, die iteriert werden, darstellen zu können. Hört sich kompliziert an, aber ist im Grunde genommen kinderleicht.Ich zeige euch das einmal ganz schnell, indem ich mal hier in meinem Controller fix eine Liste hinzufüge. So. Da habe ich jetzt eine wunderbare Users-Liste an der Stelle. Die Users-Liste hat Objekte. Jedes dieser Objekte hat eine ID firstName, lastName, gender, age und cool. Diese Liste möchte ich jetzt hier anzeigen lassen innerhalb meiner View. Dafür schnappe ich mir wieder ein List-Item, aber diesmal verwende ich die Direktive ngRepeat. In der ngRepeat-Direktive möchte ich durch diese Users-Liste iterieren, die ich hierher so eben erzeugt habe. Und zwar möchte ich jeden einzelnen User in Users ansprechen, und dann bin ich in der Lage, über die Bindung zu sagen, jeder User individuell iruirt wurde. Davon möchtei ich gerne die ID sehen. Und die ID erkenne ich entsprechend deswegen, weil hier die Intelligenz vorherrscht, dass die ID an der Stelle der ID ist, die wir hier in diesem jeweiligen Objekt haben. Und teste ich das Ganze jetzt einfach mal im Browser. Sehen wir dann wunderbar die ID. Zusätzlich bin ich auch hier natürlich in der Lage zu sagen user.firstName und lastName. Und das age wollen wir auch noch im eckigen Klammern hier hizufügen. Vallah! Schauen wir uns das Ganze noch mal an! Dann sehen wir dann wunderbar, dass wir hier die entsprechenden Informationen für den User bekommen haben, das heißt, wir haben den Namen bekommen, wir wissen, wie alt er ist, wir haben hier die ID. Die ID ist für gewöhnlich irrelevant in dem Datensatz, deswegen entferne ich da hier und schiebe das hier ein wenig noch mal herum und habe dann im Grunde genommen, schau mal, den Zehntel fertig für ngRepeat das heißt, wir waren jetzt hier in der Lage gewesen, sehr, sehr schnell dieses List-Item-Elelement, das ich hier mit diversen Bindungen versehen habe, als Template zu verwenden. Dafür haben wir die Direktive ngRepeat genommen. In der Direktive ngRepeat haben wir gesagt, dass wir durch die Users-Liste iterieren wollen, die im Scope des Users Contoller entsprechend vorhanden ist. Jeder einzelne Wert dieser Users-Liste haben wir dann im User zur Verfügung gestellt bekommen von ngRepeat, und sind dann in der Lage, durch eine ganz normale Bindung von dem User-Objekt Elemente entsprechend abzufragen und darzustellen.

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!