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

Liste aus HTML-Fragment erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert weitere Direktiven zur Definition eines HTML-Fragments, um aus diesem Einträge iterierend aus einer Liste darzustellen.
03:17

Transkript

"ng- reapeat" ermöglicht es euch ja ein einzelnes HTML-Element als Template für das Italieren durch eine Liste zu verwenden, um einzelne Listen Einträge dann entsprechend darstellen zu können. Es gibt zusätzlich zu der Direktive ng-repeat aber auch noch die Direktive ng-repeat-start, und ng-repeat-start verfügt über die Möglichkeit, HTML-Fragmente als Template zum Italieren durch eine Liste zu verwenden. Um so ein Fragment beziehungsweise ein Block kennzeichnen zu können, müsst ihr dabei wie folgt vorgehen. In dem HTML-Knoten, dass, wie genannt, für das Fragment sein soll, nutzt ihr die Direktive ng-repeat-start, und im ng-repeat-start verwendet ihr hier ebenfalls den Ausdruck, durch welche Liste italiert werden soll, und wie der einzelne Listeneinttrag zur Verfügung gestellt werden soll. In dem HTML-Knoten, dass quasi das Ende eueres Fragments darstellt, müsst ihr dann die Direktive ng-repeat-end verwenden. Das heißt, damit das Ganze sauber funktioniert, müsst ihr hier eine Kombination nutzen, eine Kombination aus ng-repeat-start, sowie ng-repeat-end. Wenn ich nun mal reinschaue, dann erkennen wir, dass mein Fragment dabei wie folgt aussieht. Ich möchte ein Überschriftsbereich machen, und in diesem Überschriftsbereich selber hinterlasse ich von dem jeweiligen User den Vor- und Nachnamen, anschließend erzeuge ich ein Body-Bereich des Panels, und in diesem Body-Bereich hinterlasse ich die Information zu E-Mail Adresse und Alter des Users, das ich hier entsprechend mit den doppelgeschweiften Klammern hier binde. Resultat ist nun folgendes: Klub A wird ein Panel angeliegt, und in diesem Panel wird so häufig der Überschrift und Body-Bereich wiederholt, wie es Listeneinträge in Users gibt. Klicke ich auf eines der Überschriften, also auf den Namen, wird dafür gesorgt, dass dieser jeweilige Listeneintrag gelöscht wird. Dies realisiere ich über eine Delete-Methode, die im Userkontrolle hinterliegt ist, und das mit dem ab tiefem Index, in dem ich mich befinde, dann in der Lage ist, den jeweiligen User mittels splice aus dem Arrays zu entfernen. Okay, lasst uns das Ganze nun anschauen, sehen wir hier wunderbar, dass wir hier ganz viele Headerbereiche haben, zusätzlich haben wir hier Body-Bereiche in dem E-Mail und Alter dargestellt werden. Ich habe auch geradeaus versehen, weil ich den Block hier selektieren wollte, auf einen Header drauf geklickt, und dann könnt ihr euch erkennen, dass dann wunderbar dieser gesamte Eintrag verschwindet, durch das Delete, das ich hier als ng-Klick nochmal gebunden habe, und in diesem Beispiel haben wir also gelernt, wie wir in der Lage sind, ein HTML-Fragment, das bestehend ist zu nutzen als Vorlage, um dann mittels ng-repeat-start und end eine Liste darstellen zu können.

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!