Hva er filter i AngularJS?
Et filter i AngularJS hjelper til med å formatere verdien av et uttrykk som skal vises for brukeren uten å endre det originale formatet. For eksempel, hvis du vil at strengen din skal være i små eller store bokstaver, kan du gjøre det ved hjelp av filtre. Det er innebygde filtre som "små bokstaver", "store bokstaver", som kan hente små og store utskrifter tilsvarende.
På samme måte, for tall, kan du bruke andre filtre.
I løpet av denne opplæringen vil vi se de forskjellige innebygde standardfiltrene som er tilgjengelige i Angular.
I denne veiledningen vil du lære-
- Småfilter i AngularJS
- Store bokstaver i AngularJS
- Tallfilter i AngularJS
- Valutafilter i AngularJS
- JSON-filter i AngularJS
Småfilter i AngularJS
Dette filteret tar en strengutgang og formaterer strengen og viser alle tegnene i strengen som små bokstaver.
La oss se på et eksempel på AngularJS-filtre med AngularJS tolowercase-alternativet.
I eksemplet nedenfor vil vi bruke en kontroller til å sende en streng til en visning via scope-objektet. Vi bruker deretter et filter i visningen for å konvertere strengen til små bokstaver.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Kode Forklaring:
- Her sender vi en streng, som er en kombinasjon av små og store bokstaver i en medlemsvariabel kalt "tutorialName" og fester den til omfangsobjektet. Verdien på strengen som sendes er "AngularJS".
- Vi bruker medlemsvariabelen "tutorialName" og setter et filtersymbol (|) som betyr at utgangen må endres ved å bruke et filter. Vi bruker deretter små bokstaver for å si å bruke det innebygde filteret til å sende ut hele strengen med små bokstaver.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen
- Det kan sees at strengen "AngularJS" som ble sendt i variabelen tutorialName som var en kombinasjon av små og store bokstaver, er blitt utført.
- Etter utførelse er den endelige utgangen med små bokstaver som vist ovenfor.
Store bokstaver i AngularJS
Dette filteret ligner på små bokstaver; Forskjellen er at det tar en strengutgang og formaterer strengen og viser alle tegnene i strengen som store bokstaver.
La oss se på et eksempel på å kapitalisere filteret AngularJS med små bokstaver.
I nedenstående eksempel på AngularJS-versaler, bruker vi en kontroller for å sende en streng til en visning via omfangsobjektet. Vi bruker deretter et filter i visningen for å konvertere strengen til store bokstaver.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Kode Forklaring:
- Her sender vi en streng som er en kombinasjon av små og store bokstaver "Angular JS" i en medlemsvariabel kalt "tutorialName" og fester den til omfangsobjektet.
- Vi bruker medlemsvariabelen "tutorialName" og setter et filtersymbol (|), noe som betyr at utgangen må endres ved å bruke et filter. Vi bruker deretter store bokstaver for å si å bruke det innebygde filteret til å sende ut hele strengen med store bokstaver.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Det kan sees at strengen som ble sendt i variabelen tutorialName, som var en kombinasjon av små og store bokstaver, har blitt lagt ut i stor bokstav.
Tallfilter i AngularJS
Dette filteret formaterer et tall og kan bruke en grense på desimaltegnene for et tall.
La oss se på et eksempel på AngularJS-filtre med nummeralternativet.
I eksemplet nedenfor,
Vi ønsket å vise hvordan vi kan bruke tallfilteret til å formatere et tall som skal vises med en begrensning på to desimaler.
Vi bruker en kontroller for å sende et nummer til en visning via omfangsobjektet. Vi bruker deretter et filter i visningen for å bruke tallfilteret.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Kode Forklaring:
- Her sender vi et tall med et større antall desimaler i en medlemsvariabel kalt tutorialID og fester det til omfangsobjektet.
- Vi bruker medlemsvariabelen tutorialID og setter et filtersymbol (|) sammen med tallfilteret. Nå i nummer: 2, indikerer de to at filteret skal begrense antall desimaler til 2.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Det kan sees at tallet som ble sendt i variabelen tutorialID som hadde et stort antall desimaler, har blitt begrenset til 2 desimaler på grunn av antallet: 2 filtre som ble brukt.
Valutafilter i AngularJS
Dette filteret formaterer et valutafilter til et tall.
Anta at hvis du ønsket å vise et tall med en valuta som $, kan dette filteret brukes.
I eksemplet nedenfor vil vi bruke en kontroller til å sende et nummer til en visning via omfangsobjektet. Vi bruker deretter et filter i visningen for å bruke det nåværende filteret.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Kode Forklaring:
- Her sender vi et tall i en medlemsvariabel kalt tutorialprice og legger det til omfangsobjektet.
- Vi bruker medlemsvariabelen opplæringspris og setter et filtersymbol (|) sammen med valutafilteret. Merk at valutaen som brukes avhenger av språkinnstillingene som brukes på maskinen.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen
- Det kan sees at valutasymbolet er lagt til nummeret som ble sendt i variabelopplæringsprisen.
- I vårt tilfelle, siden språkinnstillingene er engelsk (USA), settes $ symbolet inn som valuta.
JSON-filter i AngularJS
Dette filteret formaterer en JSON-lignende inngang og bruker AngularJS JSON-filteret for å gi utdataene i JSON.
I eksemplet nedenfor bruker vi en kontroller for å sende et JSON-objekt til en visning via scope-objektet. Vi vil da bruke et filter i visningen for å bruke JSON-filteret.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Kode Forklaring:
- Her sender vi et tall i en medlemsvariabel kalt "tutorial" og fester det til omfangsobjektet. Denne medlemsvariabelen inneholder en JSON-type streng med opplærings-ID: 12 og opplæringsnavn: "vinkel".
- Vi bruker medlemsvariabelen og setter et filtersymbol (|) sammen med JSON-filteret.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Fra utgangen,
- Det kan sees at JSON som en streng blir analysert og viser et riktig JSON-objekt i nettleseren.
Sammendrag:
- Filtre brukes til å endre måten utdataene vises for brukeren.
- Angular gir innebygde filtre som små og store filtre for å endre utdataene til strengene til henholdsvis små og store bokstaver.
- Det er også en bestemmelse for å endre måten tallene vises på ved å bruke tallfilteret ved å spesifisere antall desimaler som skal vises i tallet.
- Man kan også bruke valutafilteret til å legge valutasymbolet til et hvilket som helst tall.
- Hvis det er krav om å ha json-spesifikk utdata, gir vinkel også JSON-filteret for filtrering av hvilken som helst JSON-lignende streng i JSON-format.