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

Suchfilter

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Suchfilter von AngularJS führt eine Suche nach bestimmten Einträgen entweder in allen oder in spezifischen Eigenschaftsfeldern einer Liste durch.
03:23

Transkript

Mein persönlicher Lieblingsfilter in AngularJS ist der Filter namens Filter. Nun, dieser Name ist eigentlich viel zu einfach gehalten. Eigentlich ist es für mich der ultimative Suchfilter, den ich eigentlich nutzen kann, um wirklich sehr sehr schnell einfache Suchen innerhalb komplexer Objekte, in einer Liste dann durchführen zu lassen. Der Filter selber macht dabei folgendes: er operiert entweder so, dass er in allen Eigenschaftsfeldern sucht oder entsprechend in spezifischen Eigenschaftsfeldern. Und ich habe, um euch das zu demonstrieren, ein kleines Beispiel vorbereitet. Und zwar habe ich hier meine Userliste. In dieser Userliste seht ihr, dass ich ganz viele unterschiedliche Personen hier aufgefüllt habe, mit dem jeweiligen Vornamen und dem Nachnamen. Und ihr möchtet nach dem Begriff "an" suchen. Und bei dem Begriff "an" sehen wir dann entsprechend, dass wir hier unterschiedliche Treffer haben, die Lillian Goodman hat zum Beispiel die Möglichkeit, dass zweimal getroffen wurde, einmal im Vornamen, einmal im Nachnamen, Oldman hier entsprechend einmal im Nachnamen, Gianna im Vornamen, Melanie im Vornamen und Molligan entsprechend im Nachnamen. Damit ich jetzt den Filter anwenden kann, mache ich folgendes: Ich habe im Scope selber dafür gesorgt, dass ich jetzt diesen Suchfilter mal definiert habe, mit dem Wert "an", und werde nun, hier einfach den Filter verwenden, indem ich "Filter" hier eintrage und anschließend, per Doppelpunkt nun übergebe, nach welchem Objekt ich filtern will, und das ist in meinem Fall der "searchKey", den ich hier in meinem user-Modell definiert habe. Der Search-Key hat den Wert "an", und testen wir das Ganze nun noch mal! Sehen wir, dass eben die Objekte gefunden worden, wie wir sie, im Grunde genommen, gerade schon vorher gesagt haben. Der einzige Unterschied ist bei Isabella Gate. Die Isabella Gate, die wurde zwar gefunden, müssen wir einmal gucken, wie das kommen konnte. Wir suchen deswegen im Datenobjekt, und da sehen wir dann, dass in der E-Mail Adresse ein "an" drin war, deswegen ist auch dieses Suchergebnis also vollkommen legitim. Ich kann das Ganze natürlich auch flexibel gestalten, indem ich das kombiniere mit einem Input-Textfeld. Dafür werde ich jetzt einfach den Suchkey mal hier auskommentieren, und stattdessen werde ich den Suchkey erzeugen, indem ich ein Input-Werk erzeuge, von Typ "text". Ich möchte, dass das automatisch dann mit "autofocus" in den Fokus gelangt, und zusätzlich werde ich mit der Direktive ng-Modell den Wert "searchKey" definieren. Gucken wir uns das Ganze jetzt mal an! Sehen wir, dass ich hier ein Eingabetextfeld habe. In dem Moment, wo ich jetzt hier was eintrage, hätte er eigentlich was finden müssen, ah, schaut mal, ich habe mich vertippt, mein Searchkey ganz fix reparieren, so. Und one more time "an", und schauen, funktioniert dann entsprechend hier der Filter hervorragend. Und so kann ich dann quasi, während ich tippe, auch schon gleich direkt die Suchergebnisse hier erkennen. Ich persönlich finde das eines der spannendsten Filter, die wir im AngularJS-Kontext entsprechend haben. In diesem Video haben wir also gemeinsam kennengelernt, wie wir in der Lage sind, mit dem Filter "Filter" im AngularJS Suchen innerhalb einer Liste durchzuführen.

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!