Ich habe schon einmal etwas über die Verwendung von AngularJs gelernt, daher werde ich einfach ein kleines Programm schreiben, um die Funktionen der Abfragefilterung und Sortierung zu implementieren.
Sie können aus diesem Programm lernen:
1 AngularJS -Filter
2 So verwenden Sie NG-Wiederholungen
3. Verwendung von Controllern
4 Datenbindung
Programmieranalyse
Wenn Sie zuerst Filter abfragen möchten, müssen Sie den Filterfilter in AngularJs verwenden.
Verwenden Sie das Pipeline -Befehlszeichen | Direkt nach dem Ausdruck und folgen Sie der folgenden Schreibmethode, um einen Filtereffekt zu erzielen:
{{persons | Filter: Abfrage}}
Durch die Verwendung von Filter zur Implementierung der Filterung ist die Abfrage die bei der Abfragestellung eingegebene Zeichenfolge.
In ähnlicher Weise kann die Sortierfunktion mit OrderBy erreicht werden:
{{persons | Filter: Abfrage | orderBy: order}}
Die obige Abfrage und Sortierung umfasst zwei Variablen, Abfrage und Reihenfolge. Hier können Sie NG-Model direkt verwenden, um die Datenbindung zu implementieren:
Suche: <Eingabe ng-model = "query"> sortieren nach: <select ng-model = "order"> <option value = "name"> name </option> <option value = "älter"> Alter </option> </select>
AngularJS ist eine DOM-basierte Framework-Sprache, daher müssen keine Hörer und Ereignisauslöser implementiert werden. Wenn sich eine Änderung des Eingangsfelds, in dem sich die Abfrage befindet, eine Änderung des Eingangsfelds und des folgenden Ausdrucks ausgelöst wird, um das Eingangsfeld und den folgenden Ausdruck zu aktualisieren!
Im Vergleich zu einigen anderen Frameworks wird es dem DOM über den DOM -Knoten -Innerhtml basierend auf Strings hinzugefügt. Die Implementierung von AngularJs beschleunigt die Anzeige von Modellen und Ansichten. Es reduziert auch das Schreiben von Codes wie unnötige Zuhörer und Auslöser und erreicht wirklich federartige Effekte ~
Die Datenpräsentation kann durch NG-Wiederholung erreicht werden. Wenn sich die Webseite an die NG-Wiederholung analysiert, wird ein Tag für jedes Element im Array zur Kompilierung und Parsen kloniert.
<ul> <li ng-repeat = "Person in Personen | Filter: Abfrage | orderby: order"> {{Person.Name}} {{Person.age}} </li> </ul>Der Rest der Arbeit besteht darin, das Perons -Array im Skript zu initialisieren:
<div ng-controller="ctl"> ... </div> <script type="text/javascript"> function ctl($scope){ $scope.persons = [ {"name":"xingoo","age":25}, {"name":"zhangsan","age":18}, {"name":"lisi","age":20}, {"Name": "Wangwu", "Alter": 30}]; $ scope.order = "Alter"; } </script>Code und Ergebnisse
Schließlich werden alle Codes veröffentlicht:
<! docType html> <html ng-App> <kopf> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "http <body> <div ng-controller="ctl"> Search:<input ng-model="query"> Sort by:<select ng-model="order"> <option value="name">name</option> <option value="age">age</option> </select> <ul> <li ng-repeat="person in persons | filter:query | orderBy:order"> oder {"Name": "Lisi", "Alter": 20}, {"Name": "Wangwu", "Alter": 30}]; $ scope.order = "Alter"; } </script> </body> </html>Ergebnisse verwenden:
Verwenden Sie standardmäßig Alter, um zu sortieren:
Durch Auswahl können Sie die Namensart verwenden
Beim Eingeben von Zeichen werden einige Optionen automatisch durch Abfrage herausgefiltert.
Das obige ist die Informationssortierung für AngularJs -Filterung und Sortierung. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!