Demo
Hier ist das ganze Beispiel Demo
1. Filter.js Datei
Angular.module ("explepeApp", []). Constant ("Productsurl", "http: // localhost:/products") .Controller ("defaultCtrl", function ($ scope, $ http, productsurl) {$ http.get (productsurlow). Array});});Hier verwende ich den eingeführten Dienst als Konstante, und der Vorteil des Schreibens ist, dass ich ihn leicht ändern kann.
Die Verwendung des $ HTTP -Dienstes finden Sie in meinen implementierten AngularJs (iii)
<! DocType html> <html xmlns = "http://www.w.org/xhtml" ng-app = "explodpleApp"> <kopf> <meta http-equiv = "content-type" content = "text/html; charset = utf-"/utf-"/utf-"/> </title> </title> </tection> </html; src="angular.js"></script><link href="bootstrap-theme.css" rel="stylesheet" /><link href="bootstrap.css" rel="stylesheet" /><script src="filter.js"></script></head><body ng-controller="defaultCtrl" > <div> <div> <h> Produkte </h> </div> <table> <Thead> <tr> <Td> Name </td> <td> Kategorie </td> <td> Preis </td> <td> Ablauf </td> </tr> </thead> <tby> <ttr ng ng ng nge-repiry | item in products "item in products" Großbuchstaben}} </td> <td> {{item.category}} </td> <td> {{item.price | Währung}} </td> <td> {{item.expiry | Nummer}} </td> <td> {{item | JSON}} </td> </tr> </tbody> </table> </div> </body> </html>Ergebnisse des Laufs:
Filter verwenden
Filter sind in zwei Kategorien unterteilt:
1. Filterung einzelner Daten
2. arbeiten am Set.
1. Es ist relativ einfach, die Daten zu bedienen . Wie auf der Demo gezeigt, kann es in {{item | formatiert werden. Währung}} usw.
Währung: "F" kann der Preis sein, der in Pfund gefiltert wird.
Ein einzelner Datenfilter möchte das Datenformat nach dem Filter filtern: im entsprechenden Formatzeichen.
Nummer: Repräsentiert die reservierten Datendezimalstellen.
2: Sammelfilterung , Filterung einer bestimmten Nummer aus der Sammlung.
In der Basis -Demo habe ich Folgendes hinzugefügt:
<div> <h> Produkte </h> </div> <div> limit: <select ng-model = "limitValue" ng-options = "p für p in limitraange"> </select> </div> filter.js wurde hinzugefügt: $ http.get (productsurl). $ scope.limitValue = ""; // Wenn es sich um eine Zeichenfolge <span style = "Hintergrundfarbe: rgb (,,);"> $ scope.limitRange = []; für (var i =; i <= $ scopecucts.Products ); ">} </span> </span>}); <tr ng-repeat = "Artikel in Produkten | Limitto: limitValue"> <td> {{item.name | Großbuchstaben}} </td> <td> {{item.category}} </td> <td> {{item.price | Währung}} </td> <td> {{item.expiry | Nummer}} </td> <td> {{item | json}} </td> </tr> <span style = "line-height:.; Schriftfamilie: Verdana, Arial, Helvetica, sans-serif; Schriftgröße: px; Hintergrundfarbe: RGB (,);"> </span>Beim Schreiben von Funktionen müssen Sie in Erfolg geschrieben werden, da JSON -Daten asynchron erhalten werden.
Ergebnis:
Grenze: Sie können die Anzahl der auf der Seite angezeigten angepasst.
Filter erstellen
AngularJS hat zwei Filter. Zunächst können wir Filter erstellen, die einzelne Daten formatieren, wie z.
Lassen Sie uns zunächst darüber sprechen, wie ein Filter definiert wird: Der Filter wird über Modul.Filter erstellt, und das allgemeine Format der Erstellung lautet:
Angular.module ("exampleApp") // bedeutet, ein Modul zu erhalten. Der Filter wird unter dem Modul erstellt.
filter ("labelCase", function () {// Empfangen Sie zwei Parameter, der erste Parameter repräsentiert den Namen des Filters, und die zweite ist eine Fabrikfunktion
Rückgabefunktion (Wert, umgekehrt) {// Rückgabe einer Worker -Funktion, um den entsprechenden Filterprozess zu filtern. Der erste Parameter zeigt das Objekt an, das formatiert werden muss, und der zweite Parameter zeigt die Konfiguration und das folgende Format an.
if (angular.isstring (value)) {var intermediate = umgekehrt? value.touppercase (): value.tolowerCase (); return (reverse? intermediate []. tolowerCase (): intermediate []. touppercase () + intermediate.substr ());} else {return value;}}});Ich habe dies in eine JS -Datei geschrieben. CustomFilter.js vergessen nicht, es hinzuzufügen.
<link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js"> </script> <script src = "customFilter.js"> </script>
Ok, jetzt werde ich die Daten ändern:
<td> {{item.name | LabelCase: True}} </td>Wie bereits erwähnt, ist das Schreibformat Filter: Option, wenn Sie Konfigurationsinformationen hinzufügen müssen
Natürlich können die Standardparameter nicht geschrieben werden und der Standardwert wird null oder undefiniert.
Ergebnis:
Es ist so einfach, eine Filterfunktion für die Verarbeitung der einzelnen Daten anzupassen.
2. Passen Sie die von einer Sammlung verarbeiteten Funktionen genau wie Limitto an.
Angular.module ("expleApeApp"). filter ("labelCase", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? value.toUppercase (): value.tolowerCase (); return (reverse? intermediate []. intermediate.substr ());} else {return value;}}}). filter ("slip", function () {return function (data, count) {if (angular.isarray (data) && angular.isNumber (count)) {if (Data.Length <) count Daten;}}});Der HTML -modifizierte Teil:
<tr ng-repeat = "Artikel in Produkten | überspringen:">
Ergebnisse: Es gibt insgesamt sechs Datenstücke, und 2 Teile wurden mit einem Sprungfilter übergeben.
Beim Anpassen des Filters stellte ich fest, dass ein Filter definiert wurde. Ich möchte es nicht wiederholt definieren. Was soll ich tun? Wir können auch einen erstellten Filter verwenden, um ihn zu erstellen.
Angular.module ("expleApeApp"). filter ("labelCase", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? value.toUppercase (): value.tolowerCase (); return (reverse? intermediate []. intermediate.substr ());} else {return value;}}}). filter ("slip", function () {return function (data, count) {if (angular.isarray (data) && angular.isNumber (count)) {if (Data.Length <) count Data;}}}). Filter ("Take", Funktion ($ filter) {// Sie können sehen, dass ich auf den integrierten Dienst von AngularJs in der Fabrikfunktion verweist. $ filter ("limitto") (SkipData, TakeCount); // Limitto ist ein integrierter Filter.$ filter ('slip') ruft den Skip Filter auf, da er eine Funktion zurückgibt, damit wir weiterhin Parameter übergeben können.
<tr ng-Repeat = "Artikel in Produkten | Take ::">
Ergebnis:
So wird der Filter gemacht. Ist es nicht sehr einfach?