Mis on filter AngularJS-is?
Filter AngularJS aitab vormindada väärtus väljend ekraani alla muutmata esialgsel kujul. Näiteks kui soovite oma stringi kas väikeste või väikeste tähtedega, saate seda teha filtrite abil. On sisseehitatud filtreid, näiteks 'väiketähed', 'suurtähed', mis saavad vastavalt tuua väiketähed ja suurtähed.
Samamoodi võite numbrite jaoks kasutada muid filtreid.
Selle õpetuse käigus näeme erinevaid standardseid sisseehitatud filtreid, mis on saadaval Angularis.
Selles õpetuses saate teada
- Väikeste filtritega nurkJS
- Suurtähe filter nurkJS-is
- Numbrifilter nurkJS-is
- Valuuta filter AngularJS-is
- JSON-filter nurkadesJS
Väikeste filtritega nurkJS
See filter võtab stringiväljundi ja vormindab stringi ning kuvab kõik stringis olevad tähed väiketähtedena.
Vaatame AngularJS-i filtrite näidet valiku AngularJS-ga.
Allpool toodud näites kasutame kontrollerit stringi saatmiseks vaateobjekti kaudu vaatele. Seejärel kasutame stringi teisendamiseks väiketäheks filtrit.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Koodi selgitus:
- Siin edastame stringi, mis on väiketähtede ja suurtähtede kombinatsioon liikumismuutujast nimega "tutorialName", ja kinnitame selle objekti objektile. Edastatava stringi väärtus on "AngularJS".
- Kasutame liikme muutujat "tutorialName" ja paneme filtri sümboli (|), mis tähendab, et väljundit tuleb filtri abil muuta. Seejärel kasutame väiketähtsat märksõna, et kasutada sisseehitatud filtrit kogu stringi väljastamiseks väiketähtedega.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundist
- On näha, et string "AngularJS", mis edastati muutujas tutorialName, mis oli kombinatsioon väikestest ja suurtest tähtedest, on täidetud.
- Pärast täitmist on lõplik väljund väiketähtedega, nagu eespool näidatud.
Suurtähe filter nurkJS-is
See filter sarnaneb väiketähe filtriga; erinevus seisneb selles, et võtab stringi väljundi ja vormindab stringi ning kuvab kõik stringi märgid suurtähtedena.
Vaatame suurtähtede filtri AngularJS näidet väikeste tähtedega.
Allpool toodud näite AngularJS suurtähtedes kasutame kontrollerit stringi saatmiseks vaateobjekti kaudu vaatesse. Seejärel kasutame stringi suurte tähtede teisendamiseks vaates filtrit.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Koodi selgitus:
- Siin edastame stringi, mis on väiketähtede ja suurtähtede kombinatsioon "Angular JS" liikumismuutuja nimega "tutorialName", ja kinnitame selle ulatuse objektile.
- Kasutame liikme muutujat "tutorialName" ja paneme filtri sümboli (|), mis tähendab, et väljundit tuleb filtri abil muuta. Seejärel kasutame suurtähelist märksõna, et kasutada sisseehitatud filtrit kogu stringi väljastamiseks suurtähtedega.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
- On näha, et string, mis edastati muutujas tutorialName, mis oli väiketähtede ja suurtähtede kombinatsioon, on välja antud kogu suurtähega.
Numbrifilter nurkJS-is
See filter vormindab arvu ja võib rakendada arvu kümnendkohtade piirmäära.
Vaatame numbri valikuga AngularJS filtrite näidet.
Allpool toodud näites
Tahtsime tutvustada, kuidas saame numbrifiltri abil numbrit vormindada kuvamiseks kahe kümnendkoha piiranguga.
Kasutame kontrollerit numbri saatmiseks vaateala objekti kaudu. Seejärel kasutame numbrifiltri rakendamiseks vaates filtrit.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Koodi selgitus:
- Siin edastame suurema arvu kümnendkohtadega arvu muutuja nimega tutorialID ja kinnitame selle objekti objektile.
- Kasutame liikme muutujat tutorialID ja paneme koos numbrifiltriga filtri sümboli (|). Nüüd numbris: 2 näitavad need kaks, et filter peaks piirama kümnendkohtade arvu 2-ni.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
- On näha, et arvus, mis edastati muutujaga tutorialID, millel oli suur arv komakohti, on rakendatud arv: 2 filtrit piiratud kahe kümnendkohaga.
Valuuta filter AngularJS-is
See filter vormindab valuutafiltri arvuks.
Oletame, et kui soovite kuvada numbrit sellise valuutaga nagu $, siis saab seda filtrit kasutada.
Allpool toodud näites kasutame kontrollerit numbri saatmiseks vaateala objekti kaudu. Seejärel kasutame vaates filtrit praeguse filtri rakendamiseks.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Koodi selgitus:
- Siinkohal edastame numbri liikme muutujaga, mida nimetatakse juhendajahinnaks, ja kinnitame selle ulatuse objektile.
- Kasutame liikme muutuja juhendhinda ja paneme koos valuutafiltriga filtri sümboli (|). Pange tähele, et rakendatav valuuta sõltub masinas rakendatavatest keele seadetest.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundist
- On näha, et valuuta sümbol on lisatud arvule, mis edastati muutuja juhendajahind.
- Kuna meie keeleseaded on inglise keel (Ameerika Ühendriigid), lisatakse meie vääringuna sümbol $.
JSON-filter nurkadesJS
See filter vormindab JSON-laadse sisendi ja kasutab väljundi saamiseks JSON-is AngularJS JSON-filtrit.
Allpool toodud näites kasutame kontrollerit JSON-tüüpi objekti saatmiseks objekti vaateväljale. Seejärel kasutame vaates JSON-filtri rakendamiseks filtrit.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Koodi selgitus:
- Siin edastame numbri liikmemuutujaga, mida nimetatakse "juhendajaks", ja kinnitame selle ulatuse objektile. See liikmemuutuja sisaldab JSON-tüüpi stringid Õpetuse ID: 12 ja TutorialName: "Nurkne".
- Kasutame liikme muutuja õpetust ja paneme koos JSON-filtriga filtri sümboli (|).
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
- On näha, et JSON nagu string parsitakse ja kuvatakse brauseris korralik JSON-objekt.
Kokkuvõte:
- Filtreid kasutatakse väljundi kasutajale kuvamise viisi muutmiseks.
- Nurk pakub sisseehitatud filtreid, näiteks väiketähti ja suurtähte, et muuta stringide väljund vastavalt väikesteks ja suurteks.
- Samuti on säte numbrite kuvamise viisi muutmiseks numbrifiltri abil, määrates numbris kuvatavate kümnendkohtade arvu.
- Valuutafiltri abil saab valuuta sümbolit lisada mis tahes numbrile.
- Kui on nõutav json-spetsiifiline väljund, pakub nurk ka JSON-filtri mis tahes JSON-i sarnase stringi filtreerimiseks JSON-vormingusse.