Richtiger Weg, ein Suchtextfeld in angularJs zu programmieren

Question

Ein sehr allgemeines Merkmal in einigen Teilen meiner Anwendung ist ein Suchkasten, der eine Zeichenkette annimmt und dann eine Tabelle filtert, die auf der Zeichenkette basiert.

Was ich anstrebe, ist die Fähigkeit, Benutzer zu erlauben, etwas einzutippen und automatisch nach einigen Millisekunden der Verzögerung die Resultate sich zu aktualisieren. d. h. es ist nicht nötig, die Eingabetaste zu drücken.

Natürlich würde das Sortieren der Daten mit AngularJs-Filtern erfolgen. Bevor wir jedoch den Filter aktualisieren, müssen wir zunächst verstehen, dass der Benutzer die Eingabe abgeschlossen hat und nun auf die Ergebnisse wartet.

Also habe ich die Direktive ausgearbeitet, die an das Suchfeld angehängt wird.

Meine Frage ist, ist dies der richtige Ansatz, um dieses Problem anzugehen oder gibt es bessere Lösungen da draußen?

Answer 1

Sie verkomplizieren dies. Es kann viel einfacher in eckigen durchgeführt werden.

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }" 
    ng-change="doSearch()"> 

Verwenden Sie $scope.query, um auf die Abfrage in Ihrem Controller zuzugreifen. Definieren Sie $scope.doSearch() für die Suche. Die Debounce-Option wird verwendet, um 200 ms zu warten, nachdem der Benutzer die Eingabe beendet hat.

Answer 2

Wenn ich einen Filter schreibe, verwende ich ng-model für den Filtereingang, um auf den Filterwert zuzugreifen, und verwende diesen Wert dann direkt im ng-repeat-Filterwert. Zum Beispiel ist hier der Eingang den Filterwert zu erhalten:

<input type="text" ng-model="user_filter" /> 

Und hier ist eine sich wiederholende Tabellenzeile, um den Wert gefiltert modellierten oben:

<tr ng-repeat="user in users | filter: user_filter"> 

Sobald Sie eingeben, Winkelregister die neue Wert und der Filter wird angewendet. Sie müssen nicht warten oder eine Aktion ausführen, da angle die zugeordneten Werte für Sie anwendet.

Überprüfen Sie die Angular docs on filter. Es hat ein funktionierendes Beispiel am unteren Ende der Seite, das dies in Aktion zeigt.