Primer filtra AngularJS: mala, velika in amp; JSON

Kaj je filter v AngularJS?

Filter v AngularJS pomaga oblikovati vrednost izraza na zaslonu za uporabnika brez spreminjanja prvotno obliko. Če na primer želite, da je niz v malih ali velikih črkah, lahko to storite s filtri. Obstajajo vgrajeni filtri, kot so 'mala', 'velika', ki lahko ustrezno pridobijo male in velike izpise.

Podobno lahko za številke uporabite druge filtre.

Med to vadnico bomo videli različne standardne vgrajene filtre, ki so na voljo v programu Angular.

V tej vadnici boste izvedeli-

  • Majhni filter v AngularJS
  • Velika črka v AngularJS
  • Številčni filter v AngularJS
  • Valutni filter v AngularJS
  • JSON filter v kotnem JS

Majhni filter v AngularJS

Ta filter prevzame izhodni niz in oblikuje niz ter prikaže vse znake v nizu kot male črke.

Oglejmo si primer filtrov AngularJS z možnostjo AngularJS tolowercase.

V spodnjem primeru bomo uporabili krmilnik za pošiljanje niza v pogled prek predmeta obsega. Nato bomo v pogledu uporabili filter za pretvorbo niza v male črke.

Event Registration

Guru99 Global Event


Tutorial Name : 

This tutorial is {{tutorialName | lowercase}}

Razlaga kode:

  1. Tukaj posredujemo niz, ki je kombinacija malih in velikih črk v spremenljivki člana, imenovani "tutorialName", in jo pritrdimo na objekt obsega. Vrednost posredovanega niza je "AngularJS".
  2. Uporabljamo spremenljivko člana "tutorialName" in vstavimo simbol filtra (|), kar pomeni, da je treba izhod spremeniti s pomočjo filtra. Nato s ključno besedo z malimi črkami izgovorimo uporabo vgrajenega filtra za izpis celotnega niza z malimi črkami.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz izhoda

  • Vidimo, da je bil izveden niz "AngularJS", ki je bil poslan v spremenljivko tutorialName, ki je bila kombinacija malih in velikih črk.
  • Po izvedbi je končni izhod napisan z malimi črkami, kot je prikazano zgoraj.

Velika črka v AngularJS

Ta filter je podoben malemu filtru; razlika je v tem, da prevzame izhod niza, ga oblikuje in prikaže vse znake v nizu kot velike črke.

Oglejmo si primer uporabe velikih črk filtra AngularJS z malo črko.

V spodnjem primeru uporabe velikih črk AngularJS bomo uporabili krmilnik za pošiljanje niza v pogled prek predmeta obsega. Nato bomo v pogledu uporabili filter za pretvorbo niza v velike črke.

Event Registration

Guru99 Global Event


Tutorial Name : 

This tutorial is {{tutorialName | uppercase}}

Razlaga kode:

  1. Tukaj posredujemo niz, ki je kombinacija malih in velikih črk "Angular JS" v spremenljivki člana, imenovanem "tutorialName", in ga pritrdimo na objekt obsega.
  2. Uporabljamo spremenljivko člana "tutorialName" in postavljamo simbol filtra (|), kar pomeni, da je treba izhod spremeniti s pomočjo filtra. Nato z veliko besedo uporabljamo ključno besedo, da uporabimo vgrajeni filter za izpis celotnega niza z velikimi črkami.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Vidimo lahko, da je bil niz, ki je bil poslan v spremenljivki tutorialName, ki je bila kombinacija malih in velikih črk, izpisan v vseh velikih črkah.

Številčni filter v AngularJS

Ta filter formatira številko in lahko uporabi število za decimalna mesta za število.

Oglejmo si primer filtrov AngularJS z možnostjo številke.

V spodnjem primeru

Želeli smo predstaviti, kako lahko s številskim filtrom oblikujemo številko za prikaz z omejitvijo 2 decimalni mesti.

Uporabili bomo krmilnik za pošiljanje številke v pogled prek predmeta obsega. Nato bomo v pogledu uporabili filter za uporabo številskega filtra.

Event Registration

Guru99 Global Event


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

Razlaga kode:

  1. Tukaj posredujemo številko z večjim številom decimalnih mest v spremenljivko člana, imenovano tutorialID, in jo pritrdimo na objekt obsega.
  2. Uporabljamo spremenljivko člana tutorialID in skupaj s številskim filtrom vstavimo simbol filtra (|). Zdaj v številu: 2 pomeni, da mora filter omejiti število decimalnih mest na 2.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Vidimo lahko, da je bilo število, ki je bilo posredovano v spremenljivki tutorialID, ki je imelo veliko število decimalnih mest, omejeno na 2 decimalni mesti zaradi uporabljenega filtra number: 2.

Valutni filter v AngularJS

Ta filter formatira valutni filter na številko.

Recimo, da če želite prikazati številko z valuto, kot je $, potem lahko uporabite ta filter.

V spodnjem primeru bomo uporabili krmilnik za pošiljanje številke v pogled prek predmeta obsega. Nato bomo v pogledu uporabili filter za uporabo trenutnega filtra.

Event Registration

Guru99 Global Event


This tutorial Price is {{tutorialprice | currency}}

Razlaga kode:

  1. Tu posredujemo številko v spremenljivko člana, imenovano tutorialprice, in jo pritrdimo na objekt obsega.
  2. Uporabljamo člansko spremenljivko tutorialprice in skupaj z valutnim filtrom vstavimo simbol filtra (|). Upoštevajte, da je uporabljena valuta odvisna od jezikovnih nastavitev, ki se uporabljajo za napravo.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz izhoda

  • Vidno je, da je simbol valute dodan številki, ki je bila posredovana v spremenljivki tutorialprice.
  • V našem primeru, ker so jezikovne nastavitve angleščina (ZDA), je kot valuta vstavljen simbol $.

JSON filter v kotnem JS

Ta filter formatira vhod, podoben JSON, in uporabi AngularJS JSON filter, da poda izhod v JSON.

V spodnjem primeru bomo uporabili krmilnik za pošiljanje predmeta tipa JSON v pogled prek predmeta obsega. Nato bomo v pogledu uporabili filter za uporabo filtra JSON.

Event Registration

Guru99 Global Event


This tutorial is {{tutorial | json}}

Razlaga kode:

  1. Tu posredujemo številko v spremenljivko člana, imenovano "tutorial", in jo pritrdimo na objekt obsega. Ta spremenljivka člana vsebuje niz tipa JSON ID vadnice: 12 in TutorialName: "Angular".
  2. Uporabljamo vadnico spremenljivke člana in skupaj s filtrom JSON vstavimo simbol filtra (|).

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Vidimo, da je JSON kot niz razčlenjen in v brskalniku prikaže ustrezen objekt JSON.

Povzetek:

  • Filtri se uporabljajo za spreminjanje načina prikaza izhoda uporabniku.
  • Angular ponuja vgrajene filtre, na primer male in velike filtre, da spremeni izhod nizov v male in velike črke.
  • Obstaja tudi določba za spreminjanje načina prikaza številk z uporabo številskega filtra z določitvijo števila decimalnih mest, ki bodo prikazana v številu.
  • Z valutnim filtrom lahko poljubno številko dodate simbolu valute.
  • Če obstaja zahteva po izhodu, specifičnem za json, angular ponuja tudi filter JSON za filtriranje poljubnega niza, podobnega JSON, v format JSON.

Zanimive Članki...