English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Ein Filter (filter) funktioniert wie der Name schon sagt, indem er eine Eingabe annimmt, diese nach bestimmten Regeln verarbeitet und dann das verarbeitete Ergebnis zurückgibt. Hauptanwendung in der Datenformatierung, z.B. das Erhalten eines Teilarrays, das Sortieren von Elementen in einem Array. ng enthält einige Filter, darunter: currency (Währung), date (Datum), filter (Teilzeilensuche), json (Formatierung eines JSON-Objekts), limitTo (Beschränkung der Anzahl), lowercase (Kleinbuchstaben), uppercase (Großbuchstaben), number (Zahlen), orderBy (Sortieren). Insgesamt gibt es neun davon. Außerdem können eigene Filter definiert werden, das ist sehr mächtig und kann jedem Datenverarbeitungsanspruch gerecht werden.
Der Inhalt eines Filters ist sehr einfach, solange man weiß, wie man die eingebauten Filter verwendet und wie man selbst einen Filter definiert, ist alles in Ordnung ~ Ich habe heute das System gelernt und werde hier eine Einführung geben.
Zwei Verwendungen von filter
1. Filter in Templates verwenden
Wir können filter direkt in {{}} verwenden, gefolgt von dem Ausdruck | zur Trennung, die Syntax ist wie folgt:
{{ expression | filter }}
auch mehrere filter in einer Reihe verwenden können, der Ausgang des vorherigen filters wird als Eingang für den nächsten filter verwendet (kein Wunder, dass er so aussieht wie ein Rohr ...)
{{ expression | filter1 | filter}}2 | ... }}
Filter können Parameter akzeptieren, die durch : getrennt werden, wie folgt:
{{ expression | filter:argument1:argument2:... }}
Neben der Formatierung der Daten in {{}}, können wir auch Filter in Anweisungen verwenden, zum Beispiel, filtern Sie zunächst das Array array und geben Sie es dann im Zyklus aus:
<span ng-repeat="a in array | filter ">
2. In Controller und Service Filter verwenden
Wir können auch Filter in unserem JavaScript-Code verwenden, auf die Weise, die wir alle kennen, sind Abhängigkeitsinjektionen, zum Beispiel, wenn ich den Currency-Filter im Controller verwenden möchte, muss ich ihn nur in diesen Controller injizieren, der Code ist wie folgt:
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}
Durch die Verwendung von {{num}} im Template können Sie den Wert direkt ausgeben123,534.00! Auch im Dienst wird der Filter auf die gleiche Weise verwendet.
Vielleicht haben Sie Zweifel, ob Sie mehrere Filter im Controller verwenden möchten, müssen Sie sie alle einzeln injizieren, das ist doch sehr mühsam? Der Bruder, keine Sorge ~ Angular bietet einen $filter-Dienst an, um den erforderlichen Filter aufzurufen, Sie müssen nur einen $filter injizieren und die Verwendung ist wie folgt:
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}
Erreicht das gleiche Ergebnis. Der Vorteil ist, dass Sie verschiedene Filter bequem verwenden können.
Integrierte Filter von Angular
Angular integriert neun Filter, deren Verwendung sehr einfach ist, lesen Sie einfach die Dokumentation. Allerdings mache ich hier noch eine detaillierte Aufzeichnung, um in Zukunft nicht in die Dokumentation zu schauen.
1. currency (Währungsbehandlung)
Mit currency können Sie Zahlen in Währungen formatieren, standardmäßig ist der Dollar-Symbol, Sie können jedoch den gewünschten Symbol eingeben, zum Beispiel habe ich RMB eingefügt:
{{num | currency : '￥'}}
2. date (Datenformatierung)
Die native JavaScript-Funktion zur Formatierung von Daten ist begrenzt, der von Angular bereitgestellte Date-Filter kann in der Regel die Anforderungen der allgemeinen Formatierung erfüllen. Die Verwendung ist wie folgt:
{{date | date : 'yyyy'}}-MM-dd hh:mm:ss EEEE}}
Der Parameter wird verwendet, um das gewünschte Format zu spezifizieren, y M d h m s E bedeutet Jahr Monat Tag Stunde Minute Sekunde Woche, sie können frei kombiniert werden. Sie können auch eine bestimmte Anzahl von Ziffern verwenden, um die Anzahl der formatierten Stellen zu begrenzen. Außerdem kann der Parameter auch spezifische beschreibende Zeichenfolgen verwenden, z.B. "shortTime" wird die Zeit in das Format formatieren:12:05 pm und so weiter. Ng bietet acht beschreibende Zeichenfolgen an, ich finde, das ist etwas überflüssig, ich könnte nach meinem eigenen Willen die gewünschte Formatierung kombinieren und mich nicht die Mühe machen, all diese Wörter zu lernen~
3.filter(Match-Unterstring)
Dieser Name filter (man muss sagen, der Name ist wirklich verwirrend - !) wird verwendet, um eine Liste zu verarbeiten und dann Elemente mit einem bestimmten Unterstring zu filtern, die als Unterliste zurückgegeben werden. Es kann eine Zeichenfolienliste oder eine Objektliste sein. Wenn es sich um eine Objektliste handelt, können die Werte der Attribute abgestimmt werden. Es akzeptiert einen Parameter, um die Regeln für die Unterstring-Matchung zu definieren. Lassen Sie mich ein Beispiel geben, um die Verwendung des Parameters zu erläutern, ich habe eine Liste mit einigen besonders beliebten Kindern definiert:
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
5}
]
$scope.func = function(e){return e.age}4;}
{{ childrenArray | filter : 'a' }} //entsprechend
{{ childrenArray | filter : 4 }} //entsprechend4
{{ childrenArray | filter : {name : 'i'} }} //Der Parameter ist ein Objekt, das die name-Attribute enthält, die i enthalten
{{childrenArray | filter : func }} //Der Parameter ist eine Funktion, die die Rückgabe von age> spezifiziert4
4.json(formatiertes JSON-Objekt)
Der JSON-Filter kann ein JS-Objekt in einen JSON-String formatieren, ohne Parameter. Was ist das für etwas nützlich, ich werde normalerweise auch keine JSON-Zeile auf der Seite ausgeben, die Webseite sagt, dass es zum Debuggen verwendet werden kann, ja, eine gute Wahl. Oder auch im JS verwendet werden, die Funktion ist ähnlich wie die bekannte JSON.stringify(). Die Verwendung ist extrem einfach:
{{ jsonTest | json}}
5. limitTo(Begrenzung der Array- oder Zeichenfolgelänge)
Der limitTo-Filter wird verwendet, um Arrays oder Zeichenfolgen zu schneiden, nimmt einen Parameter an, um die zu schneidende Länge zu spezifizieren. Wenn der Parameter negativ ist, wird vom Ende des Arrays oder der Zeichenfolge begonnen. Ich finde, dieser Filter ist etwas nutzlos, da er nur von der Anfangsseite eines Arrays oder einer Zeichenfolge beginnen kann/Den Abschluss eines Arrays oder einer Zeichenfolge abschneiden, darüber hinaus können die ursprünglichen JavaScript-Funktionen es ersetzen. Schauen wir uns an, wie man es verwendet:
{{ childrenArray | limitTo : 2 }} //Wird die ersten beiden Elemente des Arrays anzeigen
6. lowercase(Kleinbuchstaben)
Daten in Kleinbuchstaben umwandeln. Sehr einfach, ich werde nicht weiter erläutern. Es ist ebenfalls ein recht nutzloser Filter, ohne Parameter kann die gesamte Zeichenfolge nur in Kleinbuchstaben umgewandelt werden, keine spezifischen Buchstaben können angegeben werden. Ich habe nicht einmal Lust, zu schreiben, wie man ihn verwendet.
7. uppercase(Großbuchstaben)
Gleiches gilt.
8. number(Formatierte Zahl)
Der number-Filter kann eine Zahl mit Tausendertrennzeichen hinzufügen, wie folgt:123,456,789. Der Parameter kann angeben, wie viele Dezimalstellen ein float-Typ beibehalten soll:
{{ num | number : 2 }}
9. orderBy(Sortierung)
Der orderBy-Filter kann Elemente in einem Array sortieren, nimmt einen Parameter an, um die Sortierregel zu spezifizieren. Dies kann ein String sein, der das Attributnamen zur Sortierung angibt. Dies kann auch eine Funktion sein, die die Sortierattribute definiert. Es kann auch ein Array sein, das die Reihenfolge der Sortierung der Attributwerte angibt (wenn der Wert des ersten Elements gleich ist, wird nach dem zweiten Element verglichen). Nimm das obige Beispiel der Kinder-Array:
<div>{{ childrenArray | orderBy : 'age' }}</div>/div> //Nach dem Attributwert von age sortieren, wenn-Wenn das Alter negiert wird, wird in umgekehrter Reihenfolge sortiert
<div>{{ childrenArray | orderBy : orderFunc }}</div>/div> //Nach dem Rückgabewert der Funktion sortieren
<div>{{ childrenArray | orderBy : ['age','name'] }}</div>/div> //Wenn das Alter gleich ist, wird nach dem Namen sortiert
Die Einführung der integrierten Filter ist abgeschlossen, ich bin fast eingeschlafen ... Wie du siehst, sind die integrierten Filter von ng nicht universell, in der Tat sind viele von ihnen recht nutzlos. Für individuellere Anforderungen müssen wir unsere eigenen Filter definieren. Schauen wir uns an, wie man benutzerdefinierte Filter erstellt.
Eigener Filter
Die Anpassung des Filters ist auch sehr einfach, indem Sie das filter-Methode des Moduls verwenden, eine Funktion zurückgeben, die den Eingabewert annimmt und das verarbeitete Ergebnis zurückgibt. Ohne weiteres, lassen Sie uns ein Beispiel schreiben. Zum Beispiel brauche ich einen Filter, der die Elemente mit ungerader Indizes in einem Array zurückgibt, der Code sieht so aus:
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++{
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});
Das Format ist so, Ihre Verarbeitungslógik schreiben Sie in der internen geschlossenen Funktion. Sie können auch Ihren Filter Parameter übergeben, die in der return-Funktion definiert sind, als zweiter Parameter oder auch mehr Parameter.
Das sind die Grundkenntnisse der Filter. Wie gesagt, mehr zu lernen bedeutet, den echten Test durch ein Projekt zu bestehen. Also, bevor das Projekt kommt, setzen wir uns erst einmal mit den Grundlagen auseinander~
Das ist das Ende dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir bitten Sie, die呐喊教程 zu unterstützen.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Fragen. Falls Sie Inhalte mit urheberrechtlichen Bedenken finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden und die entsprechenden Beweise bereitzustellen. Sobald nachgewiesen wird, dass Inhalte urheberrechtlich geschützt sind, werden die fraglichen Inhalte sofort gelöscht.3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Fragen. Falls Sie Inhalte mit urheberrechtlichen Bedenken finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden und die entsprechenden Beweise bereitzustellen. Sobald nachgewiesen wird, dass Inhalte urheberrechtlich geschützt sind, werden die fraglichen Inhalte sofort gelöscht.