AngularJS-Filter und benutzerdefinierter AngularJS-Filter mit Beispiel
James Hartmann
⚡ Intelligente Zusammenfassung
Ein Filter in AngularJS formatiert den Wert eines Ausdrucks für die Anzeige, ohne die zugrunde liegenden Daten zu verändern. Integrierte Filter decken Groß-/Kleinschreibung, Zahlen, Währungen und JSON ab, während ein benutzerdefinierter Filter jede Formatierungsregel verarbeitet, die das Framework nicht bereits bereitstellt.
Was ist Filter in AngularJS?
A Filtern Sie in AngularJS Filter helfen dabei, den Wert eines Ausdrucks für die Anzeige an den Benutzer zu formatieren, ohne den Originalwert zu verändern. Wenn Sie beispielsweise eine Zeichenkette in Klein- oder Großbuchstaben anzeigen möchten, können Sie dies mithilfe von Filtern erreichen. Integrierte Filter wie „lowercase“ und „uppercase“ geben die Zeichenkette in der gewünschten Schreibweise zurück. Weitere Filter sind für Zahlen, Währungen und JSON verfügbar.
⚠️ Versionshinweis: AngularJS (Version 1.x) hat am 31. Dezember 2021 das Ende seines Lebenszyklus erreicht und erhält keine weiteren Sicherheitsupdates mehr. Die folgenden Informationen sind weiterhin für die Wartung bestehender AngularJS-Anwendungen gültig; in modernen Angular-Versionen wird diese Funktion durch eine Pipe übernommen.
Filter werden in der Ansicht mit dem Pipe-Zeichen angewendet. Bevor man sich die einzelnen Filter ansieht, ist es hilfreich zu wissen, warum man einen eigenen Filter schreiben würde.
Kleinbuchstabenfilter in AngularJS
Dieser Filter nimmt eine Zeichenkette entgegen und zeigt alle ihre Zeichen in Kleinbuchstaben an.
Im Folgenden sendet ein Controller über das Scope-Objekt eine Zeichenkette an die Ansicht, und ein Filter wandelt sie in Kleinbuchstaben um.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code Erläuterung
- Die Zeichenkette „Angular JS“ (Groß- und Kleinschreibung) wird in einer Member-Variablen namens „Angular JS“ gespeichert.
tutorialNameauf dem Scope-Objekt. - Das Filtersymbol (|) kennzeichnet den Ausgang zur Transformation, und die
lowercaseDas Schlüsselwort wendet den integrierten Filter an, der die gesamte Zeichenkette in Kleinbuchstaben umwandelt.
⚠️ Korrekturen wurden an allen Einträgen vorgenommen. Alle sechs Originalexemplare wiesen drei gemeinsame Mängel auf. chrset="UTF 8" ist kein gültiges Attribut oder keine gültige Kodierung und ist jetzt charset="UTF-8". angular-route.js beladen bevor angular.min.jsDas Modul, das einen Fehler auslöste und nie verwendet wurde, wurde entfernt, ebenso wie die ungenutzte jQuery-Referenz. Im Text wurde fälschlicherweise der Wert „AngularJS“ angegeben, während der Code „Angular JS“ festlegte; der Text stimmt nun überein.
Ausgang:
Die Zeichenkette mit Groß- und Kleinbuchstaben wird vollständig in Kleinbuchstaben umgewandelt. Die umgekehrte Umwandlung funktioniert analog.
Großbuchstabenfilter in AngularJS
Dieser Filter ist das Gegenstück zum Kleinbuchstabenfilter und zeigt jedes Zeichen in Großbuchstaben an.
Im Folgenden sendet ein Controller über das Scope-Objekt eine Zeichenkette an die Ansicht, und ein Filter wandelt diese in Großbuchstaben um.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code Erläuterung
- Die Zeichenkette „Angular JS“ in Groß- und Kleinschreibung wird eingefügt in
tutorialNameund an das Scope-Objekt angehängt. - Dem Filtersymbol (|) folgt das
uppercaseDas Schlüsselwort wird vom integrierten Filter so eingestellt, dass die gesamte Zeichenkette in Großbuchstaben umgewandelt wird.
⚠️ Korrektur: Die ursprüngliche Einleitung dieses Abschnitts als „Beispiel für den Großschreibungsfilter in AngularJS mit der Option für Kleinbuchstaben“ ist gleich doppelt falsch. Dieser Abschnitt demonstriert den Großschreibungsfilter, und AngularJS bietet überhaupt keinen Großschreibungsfilter – um nur den ersten Buchstaben großzuschreiben, ist ein benutzerdefinierter Filter erforderlich, dessen Erstellung in den späteren Abschnitten erläutert wird.
Ausgang:
Fallunterscheidungsfilter benötigen keine Argumente. Der nächste Filter zeigt, wie ein Doppelpunkt einen Parameter an einen Filter übergibt.
Zahlenfilter in AngularJS
Dieser Filter formatiert eine Zahl und kann die Anzahl der angezeigten Dezimalstellen begrenzen.
Das folgende Beispiel verwendet den Zahlenfilter, um einen auf zwei Dezimalstellen beschränkten Wert anzuzeigen. Ein Controller sendet die Zahl über das Scope-Objekt an die Ansicht, und der Filter wird in der Ansicht angewendet.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code Erläuterung
- Eine Zahl mit vielen Dezimalstellen wird in einer Membervariablen namens gespeichert.
tutorialIDund an das Scope-Objekt angehängt. - Dem Filtersymbol (|) folgt
number:2Der Doppelpunkt übergibt ein Argument, und die 2 legt zwei Dezimalstellen fest. Der Wert wird zur Anzeige gerundet, sodass 3.565656 als 3.57 erscheint, während der Gültigkeitsbereich die volle Zahl beibehält.
Ausgang:
Die Formatierung einer einfachen Zahl reicht oft nicht aus, wenn der Wert Geld darstellt. Genau darum geht es im nächsten Filter.
Währungsfilter in AngularJS
Dieser Filter formatiert eine Zahl als Währungswert, indem er ihr ein Währungssymbol wie z. B. $ voranstellt.
Im folgenden Beispiel sendet ein Controller über das Scope-Objekt eine Zahl an die View, und der Währungsfilter wird in der View angewendet.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code Erläuterung
- Eine Zahl wird in einer Member-Variablen namens gespeichert.
tutorialpriceund an das Scope-Objekt angehängt. - Dem Filtersymbol (|) folgt das
currencyFilter.
⚠️ Korrektur: Im Originaltext wurde behauptet, die Währung hänge von den Spracheinstellungen des Rechners ab. Das stimmt nicht. AngularJS verwendet die mit der Bibliothek mitgelieferte Sprache (standardmäßig en-US), daher ist das Symbol unabhängig vom Betriebssystem $. Laden Sie die passende Sprache. angular-locale_*.js Datei oder übergeben Sie das Symbol direkt: {{tutorialprice | currency:"£"}}.
Ausgang:
Zeichenketten und Zahlen sind einfache Werte. Der letzte integrierte Filter verarbeitet ganze Objekte.
JSON-Filter in AngularJS
Dieser Filter wandelt ein Objekt in ein formatiertes Objekt um JSON Zeichenkette, die nützlich ist, um Bereichsdaten während der Entwicklung zu überprüfen.
Im folgenden Beispiel sendet ein Controller ein Objekt über das Scope-Objekt an die View, und der JSON-Filter wird in der View angewendet.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code Erläuterung
- Ein Gegenstand, der
TutorialID: 12undtutorialName: "Angular"wird in einer Member-Variable namens gespeicherttutorialund an das Scope-Objekt angehängt. - Dem Filtersymbol (|) folgt das
jsonFilter, der das Objekt in eingerückten JSON-Text serialisiert.
⚠️ Korrektur: Im Original wurde dieser Wert als „eine Zahl“ und als „eine Zeichenkette vom Typ JSON“ beschrieben. Er ist keines von beidem. Er ist ein JavaDas Skriptobjekt wird durch den JSON-Filter in eine JSON-Zeichenkette zur Anzeige umgewandelt.
Ausgang:
Diese fünf Filter decken die häufigsten Anwendungsfälle ab. Wenn keiner von ihnen das gewünschte Ergebnis liefert, schreiben Sie Ihren eigenen Filter.
Benutzerdefinierter AngularJS-Filter
Manchmal genügen die integrierten Filter von AngularJS nicht den Anforderungen an die Ausgabeformatierung. In diesem Fall kann ein benutzerdefinierter AngularJS-Filter erstellt werden, der die Ausgabe im gewünschten Format liefert.
Ein benutzerdefinierter Filter wird in einem Modul registriert und verhält sich anschließend genau wie ein integrierter Filter. In den folgenden Abschnitten werden zunächst die Standardfilter behandelt, da ein benutzerdefinierter Filter dieselbe Pipe-Syntax verwendet. Anschließend wird gezeigt, wie man einen solchen Filter erstellt.
So erstellen Sie einen benutzerdefinierten Filter in AngularJS
Im folgenden Beispiel wird eine Zeichenkette von der Controller Die Ansicht wird über das Scope-Objekt angezeigt, sollte aber nicht unverändert dargestellt werden. Ein benutzerdefinierter Filter in AngularJS Fügt eine weitere Zeichenkette hinzu und zeigt das fertige Ergebnis an.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code Erläuterung
- Die Zeichenkette „Angular“ wird in einer Membervariablen namens gespeichert.
tutorialund an das Scope-Objekt angehängt. - AngularJS bietet die
filterDie Registrierungsmethode dient zum Erstellen eines benutzerdefinierten Filters. Dieser trägt den Namen „Demofilter“ und die Ansicht bezieht sich auf ihn. - Dies ist die Standardstruktur eines benutzerdefinierten Filters: Die registrierte Funktion ist eine Fabrik Die Funktion, die die eigentliche Arbeit erledigt, wird zurückgegeben. Diese Funktion erhält den zu filternden Wert als ersten Parameter und gibt das Ergebnis zurück – hier die Eingabe mit dem angehängten „Tutorial“.
- Der Filter wird in der Ansicht mit der gleichen Pipe-Syntax wie jeder andere integrierte Filter angewendet.
💡 TIPP: Filternamen werden üblicherweise in Kleinbuchstaben oder CamelCase geschrieben. „Demofilter“ funktioniert, aber ein Name wie … appendTutorial Liest sich besser und vermeidet Namenskonflikte mit einem bereits vorhandenen Namen.
Ausgang:
Das Wort „Tutorial“ wurde an die übergebene Zeichenkette angehängt. tutorial Variable. Dieser Filter hängt immer denselben Text an, der im nächsten Abschnitt konfigurierbar gemacht wird.
Wie man Argumente an einen benutzerdefinierten Filter übergibt
Der obige Filter legt den angehängten Text fest fest und kann daher nur eine Sache tun. Eingebaute Filter wie beispielsweise number:2 Ein Argument nach einem Doppelpunkt kann akzeptiert werden, und ein benutzerdefinierter Filter kann das auch: Jeder Parameter nach dem ersten wird in der Ansicht auf ein durch einen Doppelpunkt getrenntes Argument abgebildet.
Es sind drei Schritte erforderlich: Parameter hinzufügen nach input In der zurückgegebenen Funktion muss für alle optionalen Argumente ein Standardwert angegeben werden, damit der Filter auch dann funktioniert, wenn das Argument weggelassen wird. Anschließend werden die Argumente in der Ansicht durch Doppelpunkte getrennt übergeben.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
Die Ansicht lautet dann wie folgt, wobei „Tutorial“ zu suffix und der Bindestrich wird separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Zwei Details werden leicht übersehen. Argumente sind AngularJS-Ausdrücke, daher muss eine Zeichenkette in Anführungszeichen gesetzt werden, während ein Wort ohne Anführungszeichen als Bereichseigenschaft interpretiert wird. Filter werden außerdem verkettet, wobei jeder Filter die Ausgabe des vorherigen erhält. {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Warnung: Ein Filter sollte rein sein – gleiche Ausgabe bei gleicher Eingabe, keine externen Änderungen. AngularJS speichert einen reinen Filter im Cache und führt ihn nur dann erneut aus, wenn sich die Eingabe ändert. Ein Filter, der die Uhrzeit ausliest oder einen Dienst verändert, muss als „rein“ markiert werden. $statefulDadurch wird das Caching deaktiviert und der Filter bei jedem Digest-Zyklus ausgeführt, was eine häufige Ursache für langsame Seiten ist.
Filter sind nicht auf Vorlagen beschränkt. Derselbe Filter kann aufgerufen werden von JavaDas Skript, wie im Folgenden dargestellt.
Wie man Filter in einem Controller mit dem $filter-Dienst verwendet
Das Anwenden eines Filters in der Ansicht ist der Regelfall, aber der transformierte Wert wird manchmal innerhalb des Controllers benötigt, beispielsweise vor dem Senden von Daten an einen Server. AngularJS stellt jeden registrierten Filter, sowohl integrierte als auch benutzerdefinierte, über die entsprechende Schnittstelle bereit. $filter Dienst. Injizieren Sie ihn, rufen Sie ihn mit dem Filternamen auf, um die Filterfunktion abzurufen, und rufen Sie diese dann mit dem Wert und allen Argumenten auf.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Es gibt auch eine kürzere Form: die Eingabe des Filternamens gefolgt von Filter, sowie uppercaseFilterDie Filterfunktion wird direkt bereitgestellt und kann sofort aufgerufen werden. Beide Formen führen zur selben Funktion, die Wahl ist also eine Stilfrage.
Zwei Anwendungsfälle treten immer wieder auf. Der erste ist die Vorbereitung einer Nutzlast: Ein Datum muss in der Regel in einem festgelegten Muster an eine API übermittelt werden, und $filter('date')(value, 'yyyy-MM-dd') Das Ergebnis wird erzeugt, ohne den an das Formular gebundenen Wert zu verändern. Die zweite Methode besteht darin, eine Sammlung einmalig im Controller einzuschränken, anstatt sie dort zu belassen. orderBy in eine ng-Wiederholung Ausdruck, der bei jedem Digest erneut ausgeführt wird.
Auf diese Weise eingefügte Filter werden weiterhin im Modul registriert, daher muss ein benutzerdefinierter Filter mit deklariert werden app.filter bevor irgendein Controller fragt $filter Andernfalls gibt AngularJS eine Fehlermeldung wegen eines unbekannten Providers aus.
Aufruf eines Filters in JavaEin Skript unterscheidet sich in einem wichtigen Punkt von einer Vorlage: Das Ergebnis wird einmalig berechnet und im Gültigkeitsbereich gespeichert, anstatt bei jeder Aktualisierung neu berechnet zu werden. Dadurch ist es die schnellere Option für Werte, die sich selten ändern, und die falsche Option für Werte, die sich häufig ändern müssen. track Benutzereingaben.
