AngularJS-Filter und benutzerdefinierter AngularJS-Filter mit Beispiel

Was ist Filter in AngularJS?

A Filtern Sie in AngularJS hilft dabei, den Wert eines Ausdrucks so zu formatieren, dass er dem Benutzer angezeigt wird, ohne das ursprüngliche Format zu ändern. Wenn Sie Ihre Zeichenfolge beispielsweise entweder in Klein- oder Großbuchstaben schreiben möchten, können Sie dies mithilfe von Filtern tun. Es gibt integrierte Filter wie „Kleinbuchstaben“, „Großbuchstaben“, mit denen die Ausgabe in Klein- und Großbuchstaben entsprechend abgerufen werden kann.

Benutzerdefinierter AngularJS-Filter

Manchmal können die in Angular integrierten Filter die Anforderungen an die Filterausgabe nicht erfüllen. In einem solchen Fall kann ein benutzerdefinierter AngularJS-Filter erstellt werden, der die Ausgabe auf die erforderliche Weise weiterleiten kann.

Für Zahlen können Sie auch andere Filter verwenden. In diesem Tutorial werden wir uns die verschiedenen standardmäßigen integrierten Filter ansehen, die in Angular verfügbar sind.

So erstellen Sie einen benutzerdefinierten Filter in AngularJS

Im folgenden AngularJS-Beispiel für einen benutzerdefinierten Filter übergeben wir über das Scope-Objekt eine Zeichenfolge vom Controller an die Ansicht, möchten aber nicht, dass die Zeichenfolge so angezeigt wird, wie sie ist.

Wir möchten sicherstellen, dass wir bei jeder Anzeige der Zeichenfolge einen benutzerdefinierten Filter übergeben AngularJS, wodurch eine weitere Zeichenfolge angehängt wird und die vollständige Zeichenfolge dem Benutzer angezeigt wird.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Code Erklärung

Hier übergeben wir eine Zeichenfolge „Angular“ in einer Mitgliedsvariablen namens „tutorial“ und hängen sie an das Bereichsobjekt an.
Angular stellt den Filterdienst bereit, mit dem wir unseren benutzerdefinierten Filter erstellen können. Der „Demofilter“ ist ein Name für unseren Filter.
Dies ist die Standardmethode, mit der benutzerdefinierte Filter in AngularJS definiert werden, wobei eine Funktion zurückgegeben wird. Diese Funktion enthält den benutzerdefinierten Code zum Erstellen des benutzerdefinierten Filters. In unserer Funktion nehmen wir einen String „Angular“, der aus unserer Sicht an den Filter übergeben wird, und hängen daran den String „Tutorial“ an.
Wir verwenden unseren Demofilter für unsere Mitgliedsvariable, die vom Controller an die Ansicht übergeben wurde.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

Es ist ersichtlich, dass unser benutzerdefinierter Filter angewendet wurde und
Das Wort „Tutorial“ wurde am Ende der Zeichenfolge angehängt, die in der Mitgliedsvariablen „Tutorial“ übergeben wurde.

Kleinbuchstabenfilter in AngularJS

Dieser Filter übernimmt eine Zeichenfolgenausgabe, formatiert die Zeichenfolge und zeigt alle Zeichen in der Zeichenfolge als Kleinbuchstaben an.

Schauen wir uns ein Beispiel für AngularJS-Filter mit der Option „AngularJS in Kleinbuchstaben“ an.

Im folgenden Beispiel verwenden wir einen Controller, um über das Scope-Objekt eine Zeichenfolge an eine Ansicht zu senden. Anschließend verwenden wir einen Filter in der Ansicht, um die Zeichenfolge in Kleinbuchstaben umzuwandeln.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Code Erklärung

Hier übergeben wir einen String, der eine Kombination aus Klein- und Großbuchstaben ist, in einer Mitgliedsvariablen namens „tutorialName“ und hängen ihn an das Scope-Objekt an. Der Wert der übergebenen Zeichenfolge ist „AngularJS“.
Wir verwenden die Mitgliedsvariable „tutorialName“ und fügen ein Filtersymbol (|) ein, was bedeutet, dass die Ausgabe mithilfe eines Filters geändert werden muss. Anschließend verwenden wir das Schlüsselwort smallcase, um anzugeben, dass der integrierte Filter verwendet werden soll, um die gesamte Zeichenfolge in Kleinbuchstaben auszugeben.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe

Es ist ersichtlich, dass die Zeichenfolge „AngularJS“, die in der Variablen „tutorialName“ übergeben wurde und eine Kombination aus Klein- und Großbuchstaben war, ausgeführt wurde.
Nach der Ausführung erfolgt die endgültige Ausgabe wie oben gezeigt in Kleinbuchstaben.

Großbuchstabenfilter in AngularJS

Dieser Filter ähnelt dem Kleinbuchstabenfilter. Der Unterschied besteht darin, dass eine Zeichenfolgenausgabe erfolgt, die Zeichenfolge formatiert wird und alle Zeichen in der Zeichenfolge als Großbuchstaben angezeigt werden.

Schauen wir uns ein Beispiel für den Großschreibungsfilter AngularJS mit der Kleinbuchstabenoption an.

Im folgenden AngularJS-Großschreibungsbeispiel verwenden wir einen Controller, um über das Scope-Objekt eine Zeichenfolge an eine Ansicht zu senden. Anschließend verwenden wir einen Filter in der Ansicht, um die Zeichenfolge in Großbuchstaben umzuwandeln.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Code Erklärung

Hier übergeben wir eine Zeichenfolge, die eine Kombination aus Klein- und Großbuchstaben „Angular JS“ ist, in einer Mitgliedsvariablen namens „tutorialName“ und hängen sie an das Scope-Objekt an.
Wir verwenden die Mitgliedsvariable „tutorialName“ und fügen ein Filtersymbol (|) ein, was bedeutet, dass die Ausgabe mithilfe eines Filters geändert werden muss. Anschließend verwenden wir das Schlüsselwort „uppercase“, um anzugeben, dass der integrierte Filter verwendet werden soll, um die gesamte Zeichenfolge in Großbuchstaben auszugeben.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

Es ist ersichtlich, dass die Zeichenfolge, die in der Variablen „tutorialName“ übergeben wurde und eine Kombination aus Klein- und Großbuchstaben war, ausschließlich in Großbuchstaben ausgegeben wurde.

Zahlenfilter in AngularJS

Dieser Filter formatiert eine Zahl und kann die Dezimalstellen einer Zahl begrenzen.

Schauen wir uns ein Beispiel für AngularJS-Filter mit der Nummernoption an.

Im folgenden Beispiel

Wir wollten zeigen, wie wir den Zahlenfilter verwenden können, um eine Zahl so zu formatieren, dass sie mit einer Beschränkung auf 2 Dezimalstellen angezeigt wird.

Wir werden einen Controller verwenden, um über das Scope-Objekt eine Nummer an eine Ansicht zu senden. Anschließend verwenden wir einen Filter in der Ansicht, um den Zahlenfilter anzuwenden.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Code Erklärung

Hier übergeben wir eine Zahl mit einer größeren Anzahl an Dezimalstellen in einer Mitgliedsvariablen namens „tutorialID“ und hängen sie an das Scope-Objekt an.
Wir verwenden die Mitgliedsvariable „tutorialID“ und fügen dem Zahlenfilter ein Filtersymbol (|) hinzu. In Zahl:2 bedeutet die Zwei nun, dass der Filter die Anzahl der Dezimalstellen auf 2 beschränken soll.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

Es ist ersichtlich, dass die Zahl, die in der Variablen „tutorialID“ übergeben wurde, die eine große Anzahl an Dezimalstellen hatte, aufgrund der angewendeten Zahl: 2-Filter auf 2 Dezimalstellen beschränkt wurde.

Währungsfilter in AngularJS

Dieser Filter formatiert einen Währungsfilter in eine 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 über das Scope-Objekt eine Zahl an eine Ansicht zu senden. Anschließend verwenden wir einen Filter in der Ansicht, um den aktuellen Filter anzuwenden.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Code Erklärung

Hier übergeben wir eine Zahl in einer Mitgliedsvariablen namens „tutorialprice“ und hängen sie an das Scope-Objekt an.
Wir verwenden die Mitgliedsvariable „tutorialprice“ und fügen dem Währungsfilter ein Filtersymbol (|) hinzu. Beachten Sie, dass die verwendete Währung von den Spracheinstellungen des Geräts abhängt.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe

Es ist ersichtlich, dass das Währungssymbol an die Zahl angehängt wurde, die in der Variablen „tutorialprice“ übergeben wurde.
Da in unserem Fall die Spracheinstellungen Englisch (USA) sind, wird das $-Symbol als Währung eingefügt.

JSON-Filter in AngularJS

Dieser Filter formatiert a JSON Like-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. Anschließend verwenden wir einen Filter in der Ansicht, um den JSON-Filter anzuwenden.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Code Erklärung

Hier übergeben wir eine Zahl in einer Mitgliedsvariablen namens „tutorial“ und hängen sie an das Gültigkeitsbereichsobjekt an. Diese Mitgliedsvariable enthält eine JSON-Typzeichenfolge mit Tutorial-ID:12 und TutorialName: „Angular“.
Wir verwenden das Tutorial zu Mitgliedsvariablen und fügen dem JSON-Filter ein Filtersymbol (|) hinzu.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Aus der Ausgabe,

Es ist ersichtlich, dass das JSON wie ein String analysiert und als richtiges JSON-Objekt im Browser angezeigt wird.

Zusammenfassung

Mithilfe von Filtern können Sie die Art und Weise ändern, in der die Ausgabe dem Benutzer angezeigt wird.
Angular bietet integrierte Filter wie Klein- und Großbuchstabenfilter, um die Ausgabe von Zeichenfolgen in Klein- bzw. Großbuchstaben umzuwandeln.
Mithilfe des Zahlenfilters können Sie außerdem die Anzeige von Zahlen ändern, indem Sie die Anzahl der Dezimalstellen angeben, 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, stellt Angular auch den JSON-Filter zum Filtern beliebiger JSON-ähnlicher Zeichenfolgen in das JSON-Format bereit.
Wenn es eine Anforderung gibt, die von keinem der in Angular definierten Filter erfüllt wird, können Sie Ihren benutzerdefinierten Filter erstellen und Ihren benutzerdefinierten Code hinzufügen, um den gewünschten Ausgabetyp des Filters zu bestimmen.

Du magst vielleicht:

Was ist Filter in AngularJS?

Benutzerdefinierter AngularJS-Filter

So erstellen Sie einen benutzerdefinierten Filter in AngularJS

Code Erklärung

ÄHNLICHE ARTIKEL

Kleinbuchstabenfilter in AngularJS

Code Erklärung

Großbuchstabenfilter in AngularJS

Code Erklärung

Zahlenfilter in AngularJS

Code Erklärung

Währungsfilter in AngularJS

Code Erklärung

JSON-Filter in AngularJS

Code Erklärung

Zusammenfassung