AngularJS Grundkurs

Liste durchsuchen

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS verfügt über einen Filter, welcher innerhalb einer Liste nach beliebigen Werten suchen kann. Die Ausgabe kann hierbei auf eine bestimmte Anzahl limitiert werden.
06:36

Transkript

Eines der schönsten Filter, die wir in AngularJS verwenden können, ist der Filter namens filter. In meinen Augen hätten sie das Ding eher search nennen sollen, aber das ist jetzt eine andere Geschichte. Denn der Filter filter erlaubt es Euch nämlich, dass Ihr innerhalb einer Liste suche könnte. Das heißt, filter gefolgt von einem Parameter sorgt dafür, dass ich explizit nach einem Wert in einem beliebigen Kontext suchen kann. Was ich also hier gemacht habe, ist ein wenig Vorbereitungen zu treffen und bei der Vorbereitung bin ich wie folgt vorgegangen. Ich habe hier eine Liste von Elemente, die in persons abgelegt ist, was wir hier in dem Scope entsprechend auch finden. Dieses persons verfügt über die Wert id, firstName, lastName, gender, age, registered und email. Diese Liste möchte ich jetzt anschließend später dann so filtern lassen, dass wenn ich hier oben etwas eingebe, dass dann automatisch hier unten in allen Feldern gesucht wird nach dem richtigen Element und dann entsprechend auch nur diese Sachen dann angezeigt werden. So kann ich beispielsweise jetzt hier einfach nach einem Wert suchen, beispielsweise Maya. Filter verwende ich dann einfach so, dass ich wieder mit einem pipe gefolgt dann sage, jetzt möchte ich hier an dieser Stelle den Filter filter verwenden und als Parameter übergebe ich jetzt Maya. Die Suchergebnisse limitiere ich dann auf maximal 10, die ich hier anzeigen möchte, obgleich es hier nur ein einziges Element geben wird. Denkt bitte daran, würdet Ihr das limitTo vor dem filter verwenden, würde dann automatisch auch dann entsprechend nur in den 10 Elementen, die hier freigegeben werden, auch gesucht werden. Wir haben also gelernt, dass die Filtereigenschaft an sich global sucht. Global sucht bedeutet, auch wenn ich jetzt hier den Wert 31 gegeben hätte, dass er überall nach einer Zahl 31 suchen würde und wenn wir jetzt hier statt 31 27 genommen hätten, dann hätten wir wahrscheinlich auch ein Suchergebnis bekommen, weil eine Person eben 27 Jahre alt war. Testen wir das. Es sind sogar zwei Personen 27 Jahre alt. Validieren wir nochmal gegen, suchen nach 27. Das erste Mal und da ist es das zweite Mal. Das heißt, Layla und Lillian sind 27. Was wir also jetzt machen, ist im Grunde genommen super simpel. Ich habe im ng-model gesagt, dass die Eingabe, die in diese globale Suche eingegeben wird im Scope mittels der Variable globalsearch dann hinterlegt werden soll. Jetzt bin ich einfach mal so frei und ersetze die 27 durch globalsearch, aktualisiere das Ganze nochmal, dann sehen wir alle Elemente, weil nach nichts gesucht wird momentan und anschließend gehe ich jetzt hier hin und gebe 27 ein und er zeigt mir dann alle Werte mit 27 Jahren in dem Fall. 21 Jahren oder beispielsweise Maya, um dann entsprechend die Elemente hier zu zeigen. Ihr seht also wunderbar, dass die Filterung hier schon funktioniert über alle Werte hinweg. Das bedeutet auch, wenn ich nur nach ma suche, finde ich natürlich an dieser Stelle nicht nur Maya sondern auch Mackenzie, dann Maya wiederum und überall, wo ma noch drinnen ist. Goodman hier. Jetzt könnte man überall, in jedem Kontext findet man ma, selbst in der E-Mail Adresse, die eventuell hier nicht mitangezeigt wird. Jetzt werden einige von Euch sagen, aber das ist ein bisschen ungünstig. Was ist denn, wenn ich jetzt beispielsweise nach expliziten Werten suchen soll? Im Grunde genommen super simpel. Schaut mal, ich habe ein bisschen was vorbereitet, nämlich ein zweites Formularfeld, das ich hier per Copy & Paste einfach hier hinzufügen möchte. Bei diesem zweiten Feld handelt es sich tatsächlich darum, dass ich jetzt um Vor- und einen Nachnamen suchen möchte. Ihr seht, ich habe ein kleines Problem. Die Liste ist hier zu lang, deswegen reduzieren wir sie auf maximal 3 Elemente und dann sieht es auch wieder schick aus. Bei der Vor- und Nachnamensuche spare ich mir jetzt platzenshalber auch noch hier den label. Das heißt, ich erwarte im ersten Feld den Vornamen und im zweiten Feld den Nachnamen. Was ich dann hier gemacht habe - ich sehe auch gerade, dass ich erst den Nachnamen und dann den Vorname erwarte, entschuldigt bitte - ist jetzt, dass ich ng-model ein search Objekt generiere. Das heißt, ich suche nicht mehr nach einer einfachen Zeichenkette oder nach einem einfachen Wert, sondern ich suche nach einer Analogie zu einem Objekt und Objekteigenschaften. Was ich da gemacht habe, ist relativ einfach. In diesen beiden Feldern wird ein serach Objekt erstellt einmal mit der Eigenschaft firstName, die auf das Input von firstName entsprechend verweist und lastName, die auf den Input von lastName verweist. Wichtig, firstName und lastName sind absolut exakt identisch geschrieben wie die Eigenschaftsfelder, die wir hier haben. Bedeutet also, wenn wir jetzt den serach als Objekt an ein Filter übergeben werden, wird die Filtrierung anhand des Wertes, der in lastName übergeben wurde und in firstName übergeben wurde, dann validiert und gegengeprüft. Ich prüfe das dann quasi an zwei Stellen. Damit wir jetzt hier keine Missverständnisse haben wegen Vor- und Nachname, tausche ich jetzt hier nochmal die Plätze und möchte Euch jetzt das Suchergebnis zeigen, indem ich jetzt hier nochmal Vor- und Nachname Suchergebnis entsprechend eingebe und diesmal suche ich dann eben nicht mehr nach diesem Ausdruck globalSearch, wie wir es vorher gemacht haben, sondern nach dem Objekt search, das die Eigenschaft firstName und lastName beherbergt. Aktualisieren wir das Ganze und jetzt suchen wir einfach im Vornamen nach ma und im Nachnamen suchen wir jetzt einfach nach ford und dann sehen wir wunderbar, dass dann entsprechend hier die Filterung stattgefunden hat. Würde ich nur nach fo suchen und beispielsweise das ma entfernen, findet er dann an der Stelle nichts. Ich kann also auf diese Art und Weise sehr diffizil auf die Filterung zugreifen und dementsprechend auch die Liste auf ein Minimum reduzieren, um das Ganze dann anschreiben zu können. In diesem Video haben wir also gemeinsam gelernt, wie wir in der Lage sind, sehr einfach mittels des Filters namens filter entsprechend Suchen innerhalb einer Liste durchzuführen.

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!