AngularJS-Filter funktioniert nicht für mehrere Wörter aus 2 verschiedenen Schlüsseln

Der Standardwert comparator , der vom Standard filter verwendet wird, ist sehr einfach. Es sucht nach der exakt gesuchten Zeichenfolge und analysiert die Suchzeichenfolge in keiner Weise. Der einfachste Weg, dies zu verbessern, ist die Implementierung eines weiteren comparator ( Dokuments ).

und Hinzufügen eines comparator zum $scope :

Alles, was übrig bleibt, ist die oben beschriebene bevorzugte Suchmethode:)

Sie können dies mit einem benutzerdefinierten Filter tun. Um einen benutzerdefinierten Filter zu erstellen, registrieren Sie eine neue Filter-Factory-Funktion mit Ihrem Modul und geben einen Namen ein (ich habe ihn "multiFilter" genannt). Diese Factory-Funktion gibt eine Filterfunktion zurück, die automatisch die Eingabe (wie das Array von Ihrer ng-Wiederholung) als ihren ersten Wert erhält. Die nachfolgenden Werte, die an die Filterfunktion übergeben werden, sind diejenigen, die Sie in Ihrer Filtermarkierung angeben.

Damit unser Filter schön und wiederverwendbar wird, wird er zwei zusätzliche Werte akzeptieren. Der erste ist der Objektschlüssel, den wir suchen wollen, und der zweite ist der Suchstring. In Ihrem HTML würden Sie diesen Filter als | multiFilter: ['SubCategoryName', 'BrandName'] : SearchText angeben.

Dann müssen Sie Ihren benutzerdefinierten Filter hinzufügen:

So funktioniert es:

1. Um sicherzustellen, dass keine Fehler auftreten, wenn die Suchzeichenfolge oder die Objektschlüssel leer sind, überprüfen wir, ob sie beide mit angular.isDefined() .
definiert sind
2. Wenn beides nicht definiert ist, können wir einfach das Array zurückgeben, das der Filter empfängt.
3. Um den Filter ein wenig einfacher zu machen, machen wir es so, dass Sie entweder ein Array von Objektschlüsseln oder einen einzelnen Schlüssel als String übergeben können. Wenn es sich um eine Zeichenfolge handelt, konvertieren wir diese in ein Array mit einem Element, das split verwendet.
4. Als Nächstes möchten wir, dass Benutzer nach mehreren Begriffen suchen und any der Suchwerte abgleichen können. Wir teilen den Suchstring, den wir erhalten, in ein Array auf. Um unseren Filter unabhängig von der Groß- / Kleinschreibung zu machen, konvertieren wir die Suchzeichenfolge (und später den Wert, mit dem wir sie vergleichen) in Kleinbuchstaben.
5. In Javascript sind native for-Schleifen im Allgemeinen schneller als andere Array-Iteratoren. Daher werden wir drei verschachtelte for-Schleifen verwenden. Die äußerste Schleife erfasst jedes Objekt im Eingabe-Array.
6. Die nächste Schleife ergreift jede Taste in dem Tastenfeld, das wir an den Filter übergeben haben.
7. Zu diesem Zeitpunkt können wir den Filter ein wenig effizienter gestalten, indem wir überprüfen, ob das Objekt, mit dem wir arbeiten, bereits in der Ergebnismenge ist (so wie wir es tun), da wir möglicherweise mehrere Schlüssel für dasselbe Objekt durchlaufen kann die innere Schleife überspringen und zum nächsten Objekt im Eingabe-Array weitergehen.)
8. Die innerste Schleife erledigt die Arbeit, um jeden unserer Suchbegriffe zu durchlaufen und zu prüfen, ob sie im aktuellen Eingabe-Array-Eigenschaftswert vorhanden sind.
9. Damit der Filter die Groß- / Kleinschreibung nicht berücksichtigt, konvertieren wir den Wert der aktuellen Eingabe-Array-Eigenschaft in eine Zeichenfolge und dann in Kleinbuchstaben.
10. Wenn der Suchbegriff gefunden wird, schieben wir das aktuelle Eingabeobjekt in das Ergebnisfeld.
11. Wenn die Schleifen fertig sind, geben wir das Ergebnis-Array zurück, so dass es in der Wiederholung verwendet oder an den nächsten Filter weitergeleitet werden kann.

Überprüfen Sie das Snippet unten, um die Aktion zu sehen: