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' }}
Zweistelliges Jahr: {{ today |. date:'yy' }}
Jahr: {{ heute |. Datum:'y' }}
Monatsformatierung
Englischer Monat: {{ today |. date:'MMMM' }}
Englische Monatsabkürzung: {{ today |. date:'MMM' }}
Numerischer Monat: {{ today |date:'MM' }}
Monat des Jahres: {{ today |date:'M' }}
Datumsformatierung
Numerisches Datum: {{ today|date:'dd' }}
Tag des Monats: {{ today |. date:'d' }}
Englischer Wochentag: {{ today |. date:'EEEE' }}
Englische Wochenabkürzung: {{ today |. date:'EEE' }}
Stundenformatierung
24-Stunden-Digitalstunde: {{today|date:'HH'}}
Stunde des Tages: {{today|date:'H'}}
12-Stunden-Digitalstunde: {{today|date:'hh'}}
Stunde morgens oder nachmittags: {{today|date:'h'}}
Minutenformatierung
Numerische Minuten: {{ today |. date:'mm' }}
Minute der Stunde: {{ today |. date:'m' }}
Sekundenformatierung
Numerische Sekunden: {{ today |. date:'ss' }}
Die Sekunde in einer Minute: {{ today |. date:'s' }}
Anzahl der Millisekunden: {{ today |. date:'.sss' }}
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.