AngularJS-filtre og AngularJS-tilpasset filter med eksempel

Hvad er Filter i AngularJS?

A Filtrer i AngularJS hjælper med at formatere værdien af et udtryk, der skal vises for brugeren uden at ændre det originale format. Hvis du for eksempel vil have din streng med enten små eller store bogstaver, kan du gøre det ved hjælp af filtre. Der er indbyggede filtre såsom 'små bogstaver', 'store bogstaver', som kan hente små bogstaver og store bogstaver i overensstemmelse hermed.

AngularJS brugerdefineret filter

Nogle gange kan de indbyggede filtre i Angular ikke opfylde behovene eller kravene til filtrering af output. I et sådant tilfælde kan der oprettes et brugerdefineret AngularJS-filter, som kan sende output på den nødvendige måde.

Tilsvarende kan du bruge andre filtre til tal. I løbet af denne tutorial vil vi se de forskellige standard indbyggede filtre, der er tilgængelige i Angular.

Sådan opretter du brugerdefineret filter i AngularJS

I nedenstående brugerdefinerede filter AngularJS eksempel vil vi sende en streng til visningen fra controlleren via scope-objektet, men vi ønsker ikke, at strengen skal vises, som den er.

Vi vil sikre, at når vi viser strengen, sender vi et brugerdefineret filter ind AngularJS, som vil tilføje en anden streng og vise den færdige streng for brugeren.

<!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>

Kode Forklaring

Her sender vi en streng "Angular" i en medlemsvariabel kaldet tutorial og vedhæfter den til scope-objektet.
Angular leverer filtertjenesten, som kan bruges til at oprette vores brugerdefinerede filter. 'Demofilteret' er et navn givet til vores filter.
Dette er standardmåden, hvorpå tilpassede filtre i AngularJS defineres, hvor en funktion returneres. Denne funktion er det, der indeholder den brugerdefinerede kode til at oprette det brugerdefinerede filter. I vores funktion tager vi en streng "Angular", som sendes fra vores visning til filteret, og tilføjer strengen "Tutorial" hertil.
Vi bruger vores Demofilter på vores medlemsvariabel, som blev sendt fra controlleren til visningen.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

Det kan ses, at vores brugerdefinerede filter er blevet anvendt og
Ordet 'Tutorial' er blevet tilføjet i slutningen af strengen, som blev videregivet i medlemsvariabel tutorial.

Filter med små bogstaver i AngularJS

Dette filter tager et strengoutput og formaterer strengen og viser alle tegnene i strengen som små bogstaver.

Lad os se på et eksempel på AngularJS-filtre med indstillingen AngularJS til små bogstaver.

I nedenstående eksempel vil vi bruge en controller til at sende en streng til en visning via scope-objektet. Vi vil derefter bruge et filter i visningen til at konvertere strengen til små bogstaver.

<!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>

Kode Forklaring

Her sender vi en streng, som er en kombination af små og store bogstaver i en medlemsvariabel kaldet "tutorialName", og vedhæfter den til scope-objektet. Værdien af den streng, der sendes, er "AngularJS".
Vi bruger medlemsvariablen "tutorialName" og sætter et filtersymbol (|), hvilket betyder, at outputtet skal ændres ved at bruge et filter. Vi bruger derefter nøgleordet med små bogstaver til at sige at bruge det indbyggede filter til at udskrive hele strengen med små bogstaver.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen

Det kan ses, at strengen "AngularJS", som blev sendt i variablen tutorialName, som var en kombination af små og store bogstaver, er blevet udført.
Efter udførelse er det endelige output med små bogstaver som vist ovenfor.

Stort filter i AngularJS

Dette filter ligner filteret med små bogstaver; forskellen er, at det tager et strengoutput og formaterer strengen og viser alle tegnene i strengen som store bogstaver.

Lad os se på et eksempel på filter AngularJS med store bogstaver med små bogstaver.

I AngularJS-eksemplet nedenfor vil vi bruge en controller til at sende en streng til en visning via scope-objektet. Vi vil derefter bruge et filter i visningen til at konvertere strengen til store bogstaver.

<!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>

Kode Forklaring

Her sender vi en streng, som er en kombination af små og store bogstaver "Angular JS" i en medlemsvariabel kaldet "tutorialName" og vedhæfter den til scope-objektet.
Vi bruger medlemsvariablen "tutorialName" og sætter et filtersymbol (|), hvilket betyder, at outputtet skal ændres ved at bruge et filter. Vi bruger så nøgleordet med store bogstaver til at sige at bruge det indbyggede filter til at udskrive hele strengen med store bogstaver.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

Det kan ses, at strengen, som blev sendt i variablen tutorialName, som var en kombination af små og store bogstaver, er blevet udskrevet med store bogstaver.

Nummerfilter i AngularJS

Dette filter formaterer et tal og kan anvende en grænse for decimalerne for et tal.

Lad os se på et eksempel på AngularJS-filtre med nummerindstillingen.

I eksemplet nedenfor,

Vi ønskede at vise, hvordan vi kan bruge talfilteret til at formatere et tal, der skal vises med en begrænsning på 2 decimaler.

Vi vil bruge en controller til at sende et nummer til en visning via scope-objektet. Vi vil derefter bruge et filter i visningen til at anvende nummerfilteret.

<!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>

Kode Forklaring

Her sender vi et tal med et større antal decimaler i en medlemsvariabel kaldet tutorialID og knytter det til scope-objektet.
Vi bruger medlemsvariablen tutorialID og sætter et filtersymbol (|) sammen med nummerfilteret. Nu i nummer:2 angiver de to, at filteret skal begrænse antallet af decimaler til 2.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

Det kan ses, at tallet, som blev bestået i variablen tutorialID, som havde et stort antal decimaler, er blevet begrænset til 2 decimaler på grund af antallet: 2 filtre, der blev anvendt.

Valutafilter i AngularJS

Dette filter formaterer et valutafilter til et tal.

Antag, at hvis du ønsker at vise et tal med en valuta såsom $, så kan dette filter bruges.

I nedenstående eksempel vil vi bruge en controller til at sende et nummer til en visning via scope-objektet. Vi vil derefter bruge et filter i visningen til at anvende det aktuelle filter.

<!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>

Kode Forklaring

Her sender vi et tal i en medlemsvariabel kaldet tutorialprice og vedhæfter det til scope-objektet.
Vi bruger medlemsvariablen tutorialprice og sætter et filtersymbol (|) sammen med valutafilteret. Bemærk, at den anvendte valuta afhænger af de sprogindstillinger, der anvendes på maskinen.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen

Det kan ses, at valutasymbolet er blevet tilføjet til tallet, som blev bestået i den variable tutorialpris.
I vores tilfælde, da sprogindstillingerne er engelsk (USA), er symbolet $ indsat som valuta.

JSON-filter i AngularJS

Dette filter formaterer en JSON ligesom input og anvender AngularJS JSON-filteret for at give output i JSON.

I eksemplet nedenfor vil vi bruge en controller til at sende et JSON-objekt til en visning via scope-objektet. Vi vil derefter bruge et filter i visningen til at anvende JSON-filteret.

<!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>

Kode Forklaring

Her sender vi et tal i en medlemsvariabel kaldet "tutorial" og vedhæfter det til scope-objektet. Denne medlemsvariabel indeholder en JSON-typestreng af Tutorial ID:12 og TutorialName:"Angular".
Vi bruger medlemsvariabeltutorialen og sætter et filtersymbol (|) sammen med JSON-filteret.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

Fra udgangen,

Det kan ses, at JSON som en streng parses og viser et korrekt JSON-objekt i browseren.

Resumé

Filtre bruges til at ændre den måde, outputtet vises på for brugeren.
Angular har indbyggede filtre såsom små og store filtre for at ændre outputtet af strenge til henholdsvis små og store bogstaver.
Der er også en bestemmelse om at ændre den måde, tal vises på ved at bruge talfilteret ved at angive antallet af decimaler, der skal vises i tallet.
Man kan også bruge valutafilteret til at tilføje valutasymbolet til ethvert tal.
Hvis der er et krav om at have JSON-specifikt output, giver angular også JSON-filteret til at filtrere enhver JSON-lignende streng til JSON-format.
Hvis der er et krav, der ikke er opfyldt af nogen af filtrene defineret i vinkel, så kan du oprette dit brugerdefinerede filter og tilføje din brugerdefinerede kode for at bestemme den type output, du ønsker fra filteret.

Hvad er Filter i AngularJS?

AngularJS brugerdefineret filter

Sådan opretter du brugerdefineret filter i AngularJS

Kode Forklaring

RELATEREDE ARTIKLER

Filter med små bogstaver i AngularJS

Kode Forklaring

Stort filter i AngularJS

Kode Forklaring

Nummerfilter i AngularJS

Kode Forklaring

Valutafilter i AngularJS

Kode Forklaring

JSON-filter i AngularJS

Kode Forklaring

Resumé

Tilmeld dig nyhedsbrevet