AngularJS 1.3 Grundkurs

Komplexe Suche durchführen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zusätzlich verfügt der Suchfilter über die Funktionalität, um komplexe Suchanfragen gleichzeitig in mehreren Eigenschaftsfeldern durchzuführen. Hierfür muss zunächst ein entsprechendes Objekt erstellt werden.
04:49

Transkript

Der Filter zum Suchen innerhalb einer Liste in AngularJS ist nicht nur dafür da, dass ich in jedem Eigenschaftsfeld eines Objektes dann nach einem Suchbegriff suchen kann. Ich kann mit dem Filter auch so arbeiten, dass ich über ein Objekt suchen lasse. Der Vorteil dabei ist es, dass ich in diesem Objekt quasi auch referenzieren kann auf Eigenschaftsnamen, in dem ich dann suchen möchte, wie beispielsweise firstName und lastName. Und ich möchte euch das anhand eines kurzen Beispiels mal demonstrieren. Wenn ich jetzt zum Beispiel genau nach diesem User hier suchen wollen würde, dann könnte ich zum Beispiel ein Search-Objekt hier generieren, so, und bei dem Search-Objekt sage ich dann hier, hey, such bitte nach dem Wert innerhalb des first Names , der mit "Ma" beginnt, und bei einem Wert, der mit "Ho" beginnt, innerhalb des last Names , okay, das heißt, was nun passieren würde, ist, dass ich hier ein Objekt definiert habe, indem ich sage Vorname beginnt mit "Ma", beziehungsweise enthält "Ma", last Name enthält "Ho". Und er würde jetzt hier super durch alle Eigenschaftsobjekte gehen, und das entsprechend mit dem first Name und dem last Name in diesen Objekten dann vergleichen. Was zur Folge hat, dass wenn ich anstatt hier mit dem Search-Key zu arbeiten, ich jetzt einfach mal mit dem Search arbeite, und im Objekt, dass hier sich befindet, dass ich in der Suchliste in diesem Fall auch nur ein einziges Ergebnis finde. Nehmen wir das Ergebnis für das erste Objekt, nach dem ich gesucht habe, würde ich nur nach einem "a" jeweils suchen lassen, werde ich deutlich mehr Treffer finden, hoffe ich zumindestens. So, gucken wir schnell! Dann sehen wir, dass ich hier im Vornamen jeweils ein "a" habe und im Nachnamen jeweils ein " in die Suchergebnisliste dann eingeführt wird. Ich bin aber auch in der Lage, dieses Objekt, dass ich jetzt hier einfach mal Initiale erstellt habe, so zu definieren, dass ich es über Inputfelder mit ng-Modell dann versehen kann, dafür initialisiere ich dieses Objekt einfach mal leer. Wenn ich es leer initialisierte, seht ihr, dass ich alle entsprechenden Felder hier finde. Danach hätte ich jetzt hier wieder ein Inputfeld hinzufügen. Dieses Inputfeld soll den Vornamen enthalten, das heißt, ich schreibe jetzt hier als placeholder first Name und mit dem ng-Model werde ich jetzt entsprechend oft das Searchobjekt zurückgreifen und werde sagen, im Searchobjekt soll eine Eigenschaft first Name erstellt werden, und diese Eigenschaft first Name soll dann automatisch durch diese Inputeingabe dann definierbar sein. Anschließend wiederhole ich das Ganze hier, und diesmal möchte ich, dass auch last Name definierbar ist. Und als Placeholder gebe ich hier auch last Name ein, das heißt, nochmal zur Erinnerung, in dem Moment, wo ich anfange jetzt in diesem Textfeld etwas einzutippen, passiert folgendes: ich gebe in dem Textfeld was ein, dann wird innerhalb des Suchobjektes die Eigenschaft first Name erstellen, und entsprechend dem Wert, der in diesem Input-Textfeld ist übergeben. In dem Moment aktuell realisiert sich das Search-Objekt und sorgt dafür, dass dieser Filter ebenfalls neu angestoßen wird. Das Gleiche passiert dann hier mit None und teste ich das Ganze jetzt hier einmal, dann werdet ihr sehen, dass wenn ich nun hingehe und bei first Name beispielsweise nach "s" suchen lasse, und im last Name lasse ich mal nach "o" suchen, dann werden wir drei Treffer hier finden, und auf die Art und Weise bin ich sehr schön in der Lage, das ein wenig zu steuern. Ich kann jetzt hier theoretisch alles Mögliche eingeben. Das Problem ist einfach nur, dass ich das natürlich immer so eingeben muss, dass zwei Treffer theoretisch überhaupt möglich ist. Mit "An" haben wir relativ viele Treffer, ich versuche eigentlich noch zwei Treffer gleichzeitig zu finden. Finde ich jetzt gerade nicht, aber glaubt mir bitte, doch wartet, wenn ich jetzt hier ein "o" eingebe, im last Name, ach dann sind es hier zwei "o", dann gebe ich zwei "oo" ein. Es ist nur noch der Goodman. Okay, was wir hier einfach nur gesehen haben, ist, dass ich wirklich in der Lage bin, auf diese Art und Weise wirklich mit einem Objekt ein Vergleich innerhalb einer Liste dann durchführen zu lassen, dass ich dann dazu genutze, um darin zu suchen. Bitte vergesst nicht, dass die Einträge hier automatisch zu Lowercase umgewandelt wurden. Solltet ihr mal eine andere Filtermöglichkeit oder Suchmöglichkeit haben, werdet ihr in dem Moment verpflichtet, eure eigenen Filter zu schreiben, aber ich denke, mit dem, was uns zur Hand gegeben wird, können wir uns schon sehr sehr gut zurechtfinden. In diesem Video haben wir also geme insam den Filter kennengelernt, indem wir diesen Filter mit einem Objekt angewendet haben.

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
Ihr(e) Trainer:
Erscheinungsdatum:19.11.2014
Laufzeit:4 Std. 15 min (74 Videos)

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!