Hvad er filter i AngularJS?
Et filter 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 f.eks. Vil have din streng i små eller store bogstaver, kan du gøre det ved hjælp af filtre. Der er indbyggede filtre som 'små bogstaver', 'store bogstaver', som kan hente små og store bogstaver i overensstemmelse hermed.
Tilsvarende kan du bruge andre filtre til tal.
Under denne vejledning vil vi se de forskellige standardindbyggede filtre, der er tilgængelige i Angular.
I denne vejledning lærer du-
- Lille bogstavfilter i AngularJS
- Store bogstaver i AngularJS
- Nummerfilter i AngularJS
- Valutafilter i AngularJS
- JSON-filter i AngularJS
Lille bogstavfilter i AngularJS
Dette filter tager en strengoutput og formaterer strengen og viser alle tegnene i strengen som små bogstaver.
Lad os se på et eksempel på AngularJS-filtre med AngularJS tolowercase-indstillingen.
I nedenstående eksempel bruger vi en controller til at sende en streng til en visning via scope-objektet. Vi bruger derefter et filter i visningen til at konvertere strengen til små bogstaver.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
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 output skal ændres ved hjælp af et filter. Vi bruger derefter små bogstaver for at sige at bruge det indbyggede filter til at udføre hele strengen med små bogstaver.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output
- Det kan ses, at strengen "AngularJS", der blev sendt i variablen tutorialName, som var en kombination af små og store bogstaver, er blevet udført.
- Efter udførelse er den endelige output med små bogstaver som vist ovenfor.
Store bogstaver i AngularJS
Dette filter svarer til små bogstaver; forskellen er, at det tager en strengoutput og formaterer strengen og viser alle tegnene i strengen som store bogstaver.
Lad os se på et eksempel på stort filter AngularJS med små bogstaver.
I nedenstående eksempel på AngularJS-kapitalisering bruger vi en controller til at sende en streng til en visning via scope-objektet. Vi bruger derefter et filter i visningen til at konvertere strengen til store bogstaver.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Kode Forklaring:
- Her sender vi en streng, der 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 output skal ændres ved hjælp af et filter. Vi bruger derefter det store bogstav for at sige at bruge det indbyggede filter til at udføre hele strengen med store bogstaver.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Det kan ses, at strengen, der blev videregivet i variablen tutorialName, som var en kombination af små og store bogstaver, er blevet udsendt i al store bogstaver.
Nummerfilter i AngularJS
Dette filter formaterer et tal og kan anvende en grænse for decimaltegnene for et tal.
Lad os se på et eksempel på AngularJS-filtre med nummerindstillingen.
I eksemplet nedenfor,
Vi ønskede at fremvise, hvordan vi kan bruge talfilteret til at formatere et nummer, der skal vises med en begrænsning på 2 decimaler.
Vi bruger en controller til at sende et nummer til en visning via scope-objektet. Vi bruger derefter et filter i visningen til at anvende nummerfilteret.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Kode Forklaring:
- Her passerer vi et tal med et større antal decimaler i en medlemsvariabel kaldet tutorialID og vedhæfter det til omfangsobjektet.
- Vi bruger medlemsvariablen tutorialID og sætter et filtersymbol (|) sammen med nummerfilteret. Nu i antal: 2 indikerer de to, at filteret skal begrænse antallet af decimaler til 2.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- Det kan ses, at antallet, der blev bestået i den variable 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 vil vise et tal med en valuta som $, kan dette filter bruges.
I nedenstående eksempel bruger vi en controller til at sende et nummer til en visning via scope-objektet. Vi bruger derefter et filter i visningen til at anvende det aktuelle filter.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Kode Forklaring:
- Her sender vi et nummer i en medlemsvariabel kaldet tutorialprice og vedhæfter det til scope-objektet.
- Vi bruger medlemsvariablen tutorialpris 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 udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output
- Det kan ses, at valutasymbolet er tilføjet til det nummer, der blev sendt i den variable tutorialpris.
- I vores tilfælde, da sprogindstillingerne er engelsk (USA), indsættes $ symbolet som valuta.
JSON-filter i AngularJS
Dette filter formaterer et JSON-lignende input og anvender AngularJS JSON-filteret for at give output i JSON.
I nedenstående eksempel bruger vi en controller til at sende et JSON-objekt til en visning via scope-objektet. Vi bruger derefter et filter i visningen til at anvende JSON-filteret.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Kode Forklaring:
- Her sender vi et nummer i en medlemsvariabel kaldet "tutorial" og vedhæfter det til scope-objektet. Denne medlemsvariabel indeholder en JSON-type streng af Tutorial ID: 12 og TutorialName: "Angular".
- Vi bruger tutorial for medlemsvariabler og sætter et filtersymbol (|) sammen med JSON-filteret.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
- 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, output vises på for brugeren.
- Angular giver indbyggede filtre såsom små og store filtre for at ændre output af strenge til henholdsvis mindre og store bogstaver.
- Der er også en bestemmelse til ændring af, hvordan numre vises ved hjælp af nummerfilteret ved at specificere antallet af decimaler, der skal vises i nummeret.
- Man kan også bruge valutafilteret til at føje valutasymbolet til ethvert nummer.
- Hvis der er et krav om at have json-specifik output, leverer vinkel også JSON-filteret til filtrering af enhver JSON-lignende streng i JSON-format.