AngularJS 1.3 Grundkurs

Ausgabe sortieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der OrderBy-Filter sortiert in AngularJS die Ausgabe einer bestehenden Liste anhand einer bestimmten Eigenschaft entweder auf- oder absteigend.
03:15

Transkript

In den kommenden Minuten möchte ich sehr gerne mit euch über den OrderBy- Filter sprechen. Der OrderBy-Filter macht nichts anderes, als dass er eine Ausgabe sortiert. Dabei muss ich OrderBy verwenden auf eine Liste, und in der Liste müssen logischerweise auch Objekte enthalten sein, die ich dann auch sortieren lassen kann. OrderBy verwende ich genauso, wie jeden anderen Filter, indem ich hinter die Ausgabe, die ich beeinflussen möchte, ein Pipe setze, gefolgt von dem Namen des Filters. Und OrderBy erwartet von mir als Parameter den Eigenschaftsnamen, nachdem ich filtern möchte. In meinem Fall sehen wir, dass unsere Objekte unter anderem ein Vor- und ein Nachname haben, und was ich nun tun möchte, ist das ich hier an dieser Stelle die Sortierung anhand des Vornamens sehr gerne durchführen lassen möchte, deswegen gebe ich hier "firstName" ein, wunderbar, und sorge damit dafür, dass nun meine Usersliste, die ich in diesem Scope unsortiert enthalten habe, sortiert wird, von OrderBy, und zwar anhand des Vornamens. Und dies bedeutet in diesem Fall, weil das alphanumerisch ist hier, dass es nach dem Alphabet sortiert wird. Lasst uns das Ganze jetzt also einfach mal anschauen, dann sehen wir hier, dass anhand des Vornamens alles sauber sortiert wurde. Aaliyah kommt vor Brooklyn, Destiny, Gabrielle, Gianna und so seht ihr wunderbar, dass dann diese Liste sortiert wurde. OrderBy ermöglicht es euch nicht, dass ihr kombinierte Parameter hier definiert. Würdet ihr so was machen wollen, dass ihr quasi nach Vor- und Nachnamen sortieren lässt, müsstet ihr so ein Filter selber erzeugen, was im Grunde genommen, finde ich ehrlich aber genau kein Hexenwerk ist. Einen weiteren Parameter, den ich bei OrderBy noch dazu definieren kann, ist der Parameter, ob das Ganze reverse sortiert werden soll. Der ist optional, und wenn ich den mit "true" dann definiere, könnt ihr erkennen, dass dann die Vornamen in umgekehrter Reihenfolge absteigend sortiert wurden. So ist dann Sophie jetzt der erste, und wenn ich den Wert nicht übergebe beziehungsweise false übergebe, wird es dann entsprechend aufsteigend sortiert. Ganz wichtig erlaubt mir an dieser Stelle auch den Hinweis, dass ihr selbstverständlich in der Lage seid, Filter miteinander zu kombinieren. Ihr werdet also auch in der Lage hier, zunächst einmal die gesamte Liste auf fünf Elemente zu limitieren, und anschließend die fünf Elemente sortieren zu lassen nach dem Vornamen. Testen wir das Ganze! Seht ihr dann, dass erstmal auf fünf Elemente limitiert wurden, und die verbleibenden Fünf wurden dann entsprechend hier sortiert. Sophie kommt deswegen hier nicht mehr vor, weil wenn ich hier die ersten fünf Elemente nur nehme, ist es hier Gabrielle und Layla. Sophie ist dann erstmal viel viel später gekommen, und es wird quasi auch in der Reihenfolge abgearbeitet, wie ich die Filter verwende. Das heißt, die Gesamtliste wurde erstmal auf fünf Einheiten limitiert, und dann es wurde die Liste sortiert. In den vergangenen Minuten haben wir uns also gemeinsam angeschaut, wie wir in der Lage sind, mit OrderBy- Sortierung in eine Liste einzubringen, und wir haben gelernt, dass wir Filter miteinander kombinieren 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!