Ausführliche Erläuterung der Verwendung von AngularJS-Filtern_AngularJS

AnularJS-Filter werden verwendet, um die Daten zu formatieren, die den Benutzern angezeigt werden müssen. Es gibt viele praktische integrierte Filter, die Sie auch selbst schreiben können.

Rufen Sie den Filter über das |-Symbol im Vorlagenbindungssymbol {{ }} in HTML auf. Nehmen wir zum Beispiel an, wir möchten die Zeichenfolge
konvertieren Um in Großbuchstaben umzuwandeln, können Sie jedes Zeichen in der Zeichenfolge einzeln umwandeln oder einen Filter verwenden:

{{ Name | Großbuchstaben }}
Filter können über $filter im JavaScript-Code aufgerufen werden. Beispielsweise die Verwendung von Kleinbuchstaben
im JavaScript-Code Filter:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

Wenn Sie Filter in Form von HTML verwenden und Parameter an den Filter übergeben müssen, fügen Sie einfach einen Doppelpunkt nach dem Filternamen hinzu
Das ist es. Wenn mehrere Parameter vorhanden sind, können Sie nach jedem Parameter einen Doppelpunkt hinzufügen. Beispielsweise kann ein numerischer Filter die Anzahl der Dezimalstellen
begrenzen Die Anzahl der Ziffern, schreiben Sie: 2 nach dem Filter, Sie können 2 als Parameter an den Filter übergeben:

<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

1. Währung
Der Währungsfilter kann einen numerischen Wert in ein Währungsformat formatieren. Verwenden Sie {{ 123 |. Währung }}, um 123 umzurechnen
in das Währungsformat umwandeln.
Der Währungsfilter ermöglicht es uns, das Währungssymbol selbst festzulegen. Standardmäßig wird das Währungssymbol der Region des Kunden verwendet,
Sie können aber auch Währungssymbole anpassen.
2. Datum
Der Datumsfilter kann das Datum in das gewünschte Format formatieren. In AngularJS sind mehrere Datumsformate integriert, wenn nicht
Geben Sie ein beliebiges Format an, das standardmäßig verwendet wird. Dieses Format wird im folgenden Beispiel gezeigt.
Im Folgenden sind die integrierten, unterstützten lokalisierten Datumsformate aufgeführt:

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

Jahresformatierung
Vierstellige Jahreszahl: {{ today |. date:'yyyy' }} 2454eba55ce5af447d63d506f0b22009
Zweistelliges Jahr: {{ today |. date:'yy' }} ac8ae5c416383e689e62a98e07653199
Jahr: {{ heute |. Datum:'y' }} 2454eba55ce5af447d63d506f0b22009
Monatsformatierung
Englischer Monat: {{ today |. date:'MMMM' }} 7ee77e53246386e408232298689b6a6b
Englische Monatsabkürzung: {{ today |. date:'MMM' }} 5812613cefcefb85ab7a2a7f2b19a771
Numerischer Monat: {{ today |date:'MM' }} 53031c7c3fbdb98da663f829dbcbec99
Monat des Jahres: {{ today |date:'M' }} 0d07dfb83b43f33ffd3d813164ae49ba
Datumsformatierung
Numerisches Datum: {{ today|date:'dd' }} bdf347c31d338c5559ea24febd3d6d74
Tag des Monats: {{ today |. date:'d' }} 10f30089400a4cdc8cfbd8d11fd537ef
Englischer Wochentag: {{ today |. date:'EEEE' }} eda9035c5dce46a526374ac5b30e8686
Englische Wochenabkürzung: {{ today |. date:'EEE' }} 0293fe3d87311dd8bb3d324129ccad13
Stundenformatierung
24-Stunden-Digitalstunde: {{today|date:'HH'}} ef72c658846c1084161df55b19ce8c24
Stunde des Tages: {{today|date:'H'}} 902f4f72964ab5f05217214ee25eb31b
12-Stunden-Digitalstunde: {{today|date:'hh'}} fb30a4b0d26192a15972624ccb337852
Stunde morgens oder nachmittags: {{today|date:'h'}} fb30a4b0d26192a15972624ccb337852
Minutenformatierung
Numerische Minuten: {{ today |. date:'mm' }} bdf347c31d338c5559ea24febd3d6d74
Minute der Stunde: {{ today |. date:'m' }} 10f30089400a4cdc8cfbd8d11fd537ef
Sekundenformatierung
Numerische Sekunden: {{ today |. date:'ss' }} 779138eee8ec233d5f15002382413251
Die Sekunde in einer Minute: {{ today |. date:'s' }} dfa9fc8a6a43443cb66797c35cf883e1
Anzahl der Millisekunden: {{ today |. date:'.sss' }} 132404d696749dd146bc462e6ef8004e
Hier sind einige Beispiele für benutzerdefinierte Datumsformate:

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

Filter

Filter Filter kann eine Teilmenge aus dem angegebenen Array auswählen, ein neues Array generieren und zurückgeben.

Verwenden Sie beispielsweise den folgenden Filter, um alle Wörter auszuwählen, die den Buchstaben e enthalten:

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

Wenn Sie Objekte filtern möchten, können Sie den oben erwähnten Objektfilter verwenden. Zum Beispiel, wenn Sie ein
haben, das aus Personenobjekten besteht Array, jedes Objekt enthält eine Liste seiner Lieblingsspeisen, die in der folgenden Form gefiltert werden kann:

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

Sie können zum Filtern auch eine benutzerdefinierte Funktion verwenden (in diesem Beispiel ist die Funktion auf $scope definiert):

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

Die Funktion der isCapitalized-Funktion besteht darin, true oder false zurückzugeben, je nachdem, ob der erste Buchstabe groß geschrieben ist, wie unten gezeigt:

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

Benutzerdefinierte Filter

Erstellen Sie zunächst ein Modul, auf das in der Anwendung verwiesen wird

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

Wenn Sie nun den ersten Buchstaben eines Satzes in Großbuchstaben umwandeln möchten, können Sie den Filter verwenden, um zuerst den gesamten Satz in Großbuchstaben umzuwandeln
Schreiben Sie den ersten Buchstaben und wandeln Sie ihn dann in einen Großbuchstaben um:

<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

Das Obige beschreibt die Verwendung von AngularJS-Filtern. Ich hoffe, es wird für das Lernen aller hilfreich sein.