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

AngularJS 1.3 Grundkurs

Liste bearbeiten

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Verschiedene Eigenschaften dienen in AngularJS dazu, eine mit der Repeat-Direktive erstellte Liste anhand unterschiedlicher Kriterien zu bearbeiten.
05:20

Transkript

In diesem Video möchte ich euch sehr gerne einmal demonstrieren, welche Helferlein und das AngularJS anbietet, damit ich in der Lage bin, eine iterierte Liste entsprechend noch weiter bearbeiten zu können. Ich habe dafür ein kleines Beispiel für uns vorbereitet, und zwar iteriere ich hier durch eine Anzahl von Usern. Jedes Einzelelement ist ein Userobjekt, dass ich hier mit User age, firstName und lastName ausgeben lasse, Und zusätzlich habe ich die Helfer innerhalb eines Footer-Bereiches hier entsprechend abgelicht, denn die Helfer, mit den ich arbeiten kann, ist einmal $index, $first, $middle, $last,$even, $odd. Das, was also im Grunde genommen passiert, ist folgendes: Wenn ich mich in diesem Repeater-Kontext befinde, bittet mir AngularJS automatisch die Mölichkeit an, das ich aus dem Scope heraus Eingenschaften index, first, middle, last, even, odd entsprechend aufrufen kann. Es wird hier ein Scope für diesen Repeater erzeugt, und dann kann ich die Information darüber bekommen, über welches Element wir uns unterhalten, also das wievielte Element war es jetzt hier in dem Moment, das italiert wurde, es ist das erste Element gewesen. Es ist ein Element middle gewesen, war es das letzte (last), und even und odd dient eigentlich dafür, dann zu sagen, ob dann entsprechend ein Reinwechsel stattgefunden, dass heißt, even und odd wechseln eigentlich permanent die Werte, damit ihr dann in der Lage seid, wenn ihr zum Beispiel eine Tabelle macht, unterschiedliche Farben dann damit realisieren zu können oder anzeigen zu können. Gucken uns das Ganze jetzt hier an! Dann sehen wir dann hier, dass wir die Index-Information bekommen. Bekommte Information, das ist das erste Element ist. Es ist nicht irgendein mittleres Element. Es ist nicht das letzte Element. even ist an dieser Stelle true und odd ist an dieser Stelle false. Bei dem nächsten Element wird es genau umgekehrt sein und das toggelt immer. Das müsste euch einfach so vorstellen, das heißt, quasi bei jedem graden Element ist even - true und odd - false, und bei jedem ungraden Element ist even - false und odd entsprechend true. Hier sehen wir, dass es ein middel-Element ist, das ist richtig, dann es weder das erste Element, noch das letzte Element, denn wir befinden uns hier in dem index. Und bei dem letzten Element sehen wir dann hier, dass wir im Index17 uns befinden, und das ist definitiv das letzte Element und somit nicht mehr eines der ersten oder halt auch ein mittleres Element. Lasst uns jetzt mal schauenm was wir mit diesen Informationen hier bewerkstelligen können. Hierfür werde ich, den Listen-Eintrag selber ein ngClick hier hinzufügen. Möchte etwas machen, wie beispielsweise delate. Das delate mache ich, indem ich den Zählindex übergebe, den ich hier unten auch verwendet habe. Die delate-Methode muss ich jetzt im Scope erstellen. Und sobald hier ein delate mit dem bestimmten Index aufgerufen wird, will ich das aus dem Scope entsprechend auf scope.users zurückgegriffen wird also auf der Users-Liste. Und via splice sorge ich dann dafür, dass ab dem Startindex, der übergeben worden ist, ein Element entfernt wird. Okay, lassst uns einfach mal gucken, ob das Ganze auch funktioniert wie gedacht. Ich teste das Ganze hier. Und ich habe hier die junge Frau mit 21 ah,schon dadrauf geklickt, schuldigt bitte, Okay. Ich habe jetzt eigentlich den aha kaputt gemacht. Ich wollte euch zeigen, dass wenn ich drauf klicke, dass dann exakt das mittlere Element hier verschwidet. Mache ich dann hier einfach an dieser Stelle noch mal, dass heißt, wenn ich jetzt hier auf die "Gabrielle" klicke, die 25 Jahre alt wird, werden wir sehen, dass dann "Gabrielle" verschwindet, leider die 27 kommt an die Position, und die Position 1 bleibt, sowie es ist. Ich kann hier den Namen hier nicht aussprechen, setzen wir nach. Und vallah! Und entsprechend kann ich dann so, wenn ich ganz, ganz oft hier drauf klicke, dafür sorgen, dass meine Liste immer kleiner wird,immer kleiner wird bis zum Schluss ein einziges Elementares. Klick ich nochmal, entferne ich das dann Zuschluss auch, das heißt, ich habe einfach hier den Index, den ich hier habe, missbrauche dafür, um auf die Schnelle dann in der Lage zu sein, so ein Löschen von Elementen zurückinitialiesieren. Zusätzlich bin ich noch auch in der Lage, weitere Helfer zu verwenden. Ich mache das hier mal in body, indem ich hier zum Beipiel sage ngClassEven. Ich kann mir speziell eine Klasse bestimmen, die verwendet werden soll in dem Moment , wo der Events-Zustand heißt, und das Gleiche kann ich machen mit ng-class-odd. Ich möchte, dass die odd-Klasse verwendet wird, wenn entsprechende odd Zustand heißt, und die even-Klasse, wenn die even-Zustand heißt, das heißt, wenn even true ist, dann wird entsprechend hier die Zeichenkettei even als Klasse hinzugefügt, ist odd true, wird dann entsprechend die Klasse odd hier hinzugefügt als Klasse, und odd, sowie even habe ich hier ganz einfach dadurch realisiert, dass ich die Farbe des Textes beeinflussen möchte. Teste ich das jetzt noch einmal, dann sehen wir dann wunderbar, dass abhängig von even und odd die Schriftfarbe hier rot oder blau wird. In diesem Film haben wir also ganz viele Helferlein kennen gelernt, mit denen wir in der Lage sind, Listen zu beeinflussen, und dazu zählen index, first, middle, last, even, odd als Eigenschaften sowie die Direktiven ng-class-even und ng-class-odd.

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!