Was ist Filter in AngularJS?
Ein Filter in AngularJS hilft dabei, den Wert eines Ausdrucks zu formatieren, der dem Benutzer angezeigt werden soll, ohne das ursprüngliche Format zu ändern. Wenn Sie beispielsweise möchten, dass Ihre Zeichenfolge entweder in Klein- oder Großbuchstaben geschrieben wird, können Sie dies mithilfe von Filtern tun. Es gibt integrierte Filter wie "Kleinbuchstaben", "Großbuchstaben", mit denen die Ausgabe von Kleinbuchstaben und Großbuchstaben entsprechend abgerufen werden kann.
Ebenso können Sie für Zahlen andere Filter verwenden.
In diesem Tutorial werden die verschiedenen in Angular verfügbaren Standardfilter vorgestellt.
In diesem Tutorial lernen Sie:
- Kleinbuchstabenfilter in AngularJS
- Großbuchstabenfilter in AngularJS
- Zahlenfilter in AngularJS
- Währungsfilter in AngularJS
- JSON-Filter in AngularJS
Kleinbuchstabenfilter in AngularJS
Dieser Filter übernimmt eine Zeichenfolgenausgabe, formatiert die Zeichenfolge und zeigt alle Zeichen in der Zeichenfolge in Kleinbuchstaben an.
Schauen wir uns ein Beispiel für AngularJS-Filter mit der Option AngularJS tolowercase an.
Im folgenden Beispiel verwenden wir einen Controller, um eine Zeichenfolge über das Bereichsobjekt an eine Ansicht zu senden. Wir werden dann einen Filter in der Ansicht verwenden, um die Zeichenfolge in Kleinbuchstaben umzuwandeln.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is
Code Erläuterung:
- Hier übergeben wir eine Zeichenfolge, die eine Kombination aus Klein- und Großbuchstaben in einer Mitgliedsvariablen namens "tutorialName" ist, und hängen sie an das Bereichsobjekt an. Der Wert der übergebenen Zeichenfolge ist "AngularJS".
- Wir verwenden die Mitgliedsvariable "tutorialName" und setzen ein Filtersymbol (|), was bedeutet, dass die Ausgabe mithilfe eines Filters geändert werden muss. Wir verwenden dann das Schlüsselwort Kleinbuchstaben, um zu sagen, dass der integrierte Filter verwendet wird, um die gesamte Zeichenfolge in Kleinbuchstaben auszugeben.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe
- Es ist ersichtlich, dass die Zeichenfolge "AngularJS" ausgeführt wurde, die in der Variablen tutorialName übergeben wurde, die eine Kombination aus Klein- und Großbuchstaben war.
- Nach der Ausführung wird die endgültige Ausgabe wie oben gezeigt in Kleinbuchstaben angezeigt.
Großbuchstabenfilter in AngularJS
Dieser Filter ähnelt dem Kleinbuchstabenfilter. Der Unterschied besteht darin, dass eine Zeichenfolgenausgabe übernommen und die Zeichenfolge formatiert wird und alle Zeichen in der Zeichenfolge in Großbuchstaben angezeigt werden.
Schauen wir uns ein Beispiel für die Großschreibung des Filters AngularJS mit der Option in Kleinbuchstaben an.
Im folgenden Beispiel für die Großschreibung von AngularJS verwenden wir einen Controller, um eine Zeichenfolge über das Bereichsobjekt an eine Ansicht zu senden. Wir werden dann einen Filter in der Ansicht verwenden, um die Zeichenfolge in Großbuchstaben umzuwandeln.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Code Erläuterung:
- Hier übergeben wir eine Zeichenfolge, die eine Kombination aus Klein- und Großbuchstaben "Angular JS" in einer Mitgliedsvariablen namens "tutorialName" ist, und hängen sie an das Bereichsobjekt an.
- Wir verwenden die Mitgliedsvariable "tutorialName" und setzen ein Filtersymbol (|), was bedeutet, dass die Ausgabe mithilfe eines Filters geändert werden muss. Wir verwenden dann das Schlüsselwort in Großbuchstaben, um zu sagen, dass der integrierte Filter verwendet werden soll, um die gesamte Zeichenfolge in Großbuchstaben auszugeben.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Es ist ersichtlich, dass die Zeichenfolge, die in der Variablen tutorialName übergeben wurde, die eine Kombination aus Klein- und Großbuchstaben war, in Großbuchstaben ausgegeben wurde.
Zahlenfilter in AngularJS
Dieser Filter formatiert eine Zahl und kann die Dezimalstellen für eine Zahl begrenzen.
Schauen wir uns ein Beispiel für AngularJS-Filter mit der Option number an.
Im folgenden Beispiel
Wir wollten zeigen, wie wir mit dem Zahlenfilter eine Zahl formatieren können, die mit einer Beschränkung auf 2 Dezimalstellen angezeigt werden soll.
Wir werden einen Controller verwenden, um eine Nummer über das Bereichsobjekt an eine Ansicht zu senden. Wir werden dann einen Filter in der Ansicht verwenden, um den Zahlenfilter anzuwenden.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Code Erläuterung:
- Hier übergeben wir eine Zahl mit einer größeren Anzahl von Dezimalstellen in einer Mitgliedsvariablen namens tutorialID und hängen sie an das Bereichsobjekt an.
- Wir verwenden die Mitgliedsvariable tutorialID und setzen ein Filtersymbol (|) zusammen mit dem Zahlenfilter. In Nummer 2 geben die beiden an, dass der Filter die Anzahl der Dezimalstellen auf 2 beschränken soll.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Es ist ersichtlich, dass die Zahl, die in der Variablen tutorialID übergeben wurde, die eine große Anzahl von Dezimalstellen hatte, aufgrund der Anzahl: 2 Filter, die angewendet wurden, auf 2 Dezimalstellen begrenzt wurde.
Währungsfilter in AngularJS
Dieser Filter formatiert einen Währungsfilter zu einer Zahl.
Angenommen, Sie möchten eine Zahl mit einer Währung wie $ anzeigen, dann kann dieser Filter verwendet werden.
Im folgenden Beispiel verwenden wir einen Controller, um eine Nummer über das Bereichsobjekt an eine Ansicht zu senden. Wir werden dann einen Filter in der Ansicht verwenden, um den aktuellen Filter anzuwenden.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Code Erläuterung:
- Hier übergeben wir eine Zahl in einer Mitgliedsvariablen namens tutorialprice und hängen sie an das Bereichsobjekt an.
- Wir verwenden den Tutorialpreis für die Mitgliedsvariable und setzen ein Filtersymbol (|) zusammen mit dem Währungsfilter. Beachten Sie, dass die angewendete Währung von den Spracheinstellungen abhängt, die auf das Gerät angewendet werden.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe
- Es ist zu sehen, dass das Währungssymbol an die Nummer angehängt wurde, die im variablen Tutorialpreis übergeben wurde.
- In unserem Fall wird das $ -Symbol als Währung eingefügt, da die Spracheinstellungen Englisch (USA) sind.
JSON-Filter in AngularJS
Dieser Filter formatiert eine JSON-ähnliche Eingabe und wendet den AngularJS-JSON-Filter an, um die Ausgabe in JSON zu erhalten.
Im folgenden Beispiel verwenden wir einen Controller, um ein Objekt vom Typ JSON über das Bereichsobjekt an eine Ansicht zu senden. Wir werden dann einen Filter in der Ansicht verwenden, um den JSON-Filter anzuwenden.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Code Erläuterung:
- Hier übergeben wir eine Nummer in einer Mitgliedsvariablen namens "tutorial" und hängen sie an das Bereichsobjekt an. Diese Mitgliedsvariable enthält eine JSON-Zeichenfolge mit der Tutorial-ID: 12 und dem Tutorial-Namen: "Angular".
- Wir verwenden das Tutorial für Mitgliedsvariablen und setzen ein Filtersymbol (|) zusammen mit dem JSON-Filter.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Es ist ersichtlich, dass der JSON wie eine Zeichenfolge analysiert wird und ein geeignetes JSON-Objekt im Browser angezeigt wird.
Zusammenfassung:
- Filter werden verwendet, um die Art und Weise zu ändern, in der die Ausgabe dem Benutzer angezeigt wird.
- Angular bietet integrierte Filter wie Klein- und Großbuchstaben, um die Ausgabe von Zeichenfolgen in Klein- bzw. Großbuchstaben zu ändern.
- Es ist auch vorgesehen, die Anzeige von Zahlen mithilfe des Zahlenfilters zu ändern, indem die Anzahl der Dezimalstellen angegeben wird, die in der Zahl angezeigt werden sollen.
- Sie können den Währungsfilter auch verwenden, um das Währungssymbol an eine beliebige Zahl anzuhängen.
- Wenn eine JSON-spezifische Ausgabe erforderlich ist, bietet Angular auch den JSON-Filter zum Filtern von JSON-ähnlichen Zeichenfolgen in das JSON-Format.