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 sortieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit dem orderBy-Filter können Listen in AngularJS nach bestimmten Kriterien sortiert werden.
03:39

Transkript

Mittels des Filters orderBy sind wir in der Lage Listen zu sortieren. In diesem Video möchte ich Euch gerne einmal zeigen, dass da im Grunde genommen keine Magie dahintersteckt und wie Ihr das einfach anwenden könnte. In diesem expliziten Beispiel geht es darum, dass ich hier eine Liste von Personen habe, die ich in einem Controller hinterlegt habe mit dem persons array. Diese Liste lasse ich mir hier mit einem ng-repeater dann entsprechend einfach wiedergeben und innerhalb einer Liste darstellen. Was ich jetzt hier also machen möchte, ist jetzt, dass ich die Liste ein wenig sortiere. Das ist im Grunde genommen relativ einfach. Was ich also machen muss, ist mit einem pipe die persons Liste zu sortieren, indem ich über den pipe dann suggeriere, jetzt kommt ein Filter, danach den Namen des Filters anzugeben und mit orderBy dann entsprechend nur zu sagen, wonach ich filtern möchte. Wenn wir uns noch einmal ganz kurz die Liste anschauen, sehen wir, dass wir hier unterschiedliche Elemente haben. Wir haben eine id, einen firstName, lastName, gender, age und email Adresse und über all diese Elemente kann ich dann auch filtern. Ich kann also hier, wenn ich den firstName mir schnappe und der firstName ist auch das erste Element, was hier ausgegeben wird, einfach hingehen, mit einem Doppelpunkt sagen, dass ich jetzt einen Parameter oder den ersten Parameter für meinen Filter übergeben möchte und das ist firstName. Bedeutet jetzt eigentlich im Endeffekt nichts anderes, als dass bevor der repeater hier anfängt zu arbeiten, die persons Liste sortiert wird, um das Feld firstName, also um den Vornamen und wenn wir das Ganze jetzt hier einmal speichern und aktualisieren, sehen wir hervorragend, dass der erste Vorname mit einem A beginnt, folgend dann mit einem B, etc. Das heißt, so haben wir dann hervorragend eine Möglichkeit eine Filtrierung hinzubekommen. Was ich aber auch machen könnte, was ich persönlich ganz nett finde, ist einfach mit einem ganz ordinären Minuszeichen hier vor dem Eigenschaftsnamen dafür zu sorgen, dass ich das Ganze in umgekehrter Reihenfolge filtere. Alternativ hätte ich aber auch hier ohne weiteres einen weiteren Parameter für diesen Filter anwenden können, so beispielsweise mit einem Doppelpunkt beginnend und hätte hier true übergeben können. Das true sorgt ebenfalls dafür, dass das Filtern reverse stattfindet. Also genauso analog wie das Minuszeichen, das ich in einem Eigenschaftsfeld angebe. Ich finde das true aber ein bisschen eindeutiger von der Namensgebung her. Bitte vergesst nie, dass wenn ich dann entsprechend das Ganze angewendet habe, dann ich auch ohne weiteres in der Lage bin, mehrere Filter hintereinander anzuwenden. So hätte ich beispielsweise jetzt ohne weiteres die Möglichkeit zum Beispiel einen weiteren Filter limitTo anzuwenden und zu sagen, ich möchte nur die ersten 3 Elemente und dann sehen wir wunderbar die ersten 3 Elemente des Objektes und vergesst bitte nicht, würde ich dieses limitTo vor dem orderBy anwenden, dass auch dann nur 3 Elemente tatsächlich von orderBy dann überarbeitet werden müssen. Das heißt, so ein Filter gibt immer den tatsächlichen Wert zurück, mit dem weitergearbeitet werden soll und das würde dann in diesem Moment bedeuten, dass wir zwar mit persons als Ausgangsliste ausgehen, diese aber erst um 3 limitieren, um dann anschließend eine Sortierung nach dem Vornamen in normaler Reihenfolge in aufsteigender Reihenfolge entsprechend hier durchführen würden. In diesem Video haben wir gemeinsam gelernt, wie wir mit orderBy eine Liste sortieren können, aber auch wie wir eine Kombination von unterschiedlichen Filtern auf eine Liste anwenden können.

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!