Mikä on suodatin AngularJS: ssä?
Filter angularjs auttaa alustaa arvo lausekkeen näyttö käyttäjälle muuttamatta alkuperäistä muotoa. Esimerkiksi, jos haluat merkkijonon joko pienillä tai isoilla kirjaimilla, voit tehdä sen suodattimien avulla. On sisäänrakennettuja suodattimia, kuten 'pienet kirjaimet', 'isot kirjaimet', jotka voivat hakea pienet ja isot kirjaimet vastaavasti.
Vastaavasti numeroiden osalta voit käyttää muita suodattimia.
Tämän opetusohjelman aikana näemme erilaiset sisäänrakennetut vakiosuodattimet, jotka ovat saatavana Angularissa.
Tässä opetusohjelmassa opit-
- Pienet suodattimet kulmassaJS
- Isokokoinen suodatin kulmassaJS
- Numerosuodatin kulmassaJS
- Valuuttasuodatin kulmassaJS
- JSON-suodatin kulmassaJS
Pienet suodattimet kulmassaJS
Tämä suodatin ottaa merkkijonolähdön ja muotoilee merkkijonon ja näyttää kaikki merkkijonon merkit pieninä kirjaimin.
Katsotaanpa esimerkkiä AngularJS-suodattimista, joissa on AngularJS tolowercase -vaihtoehto.
Seuraavassa esimerkissä käytämme ohjainta lähettämään merkkijono näkymään laajuusobjektin kautta. Sen jälkeen muunnamme merkkijonon pieniksi kirjaimiksi suodattimessa.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Koodin selitys:
- Tässä välitetään merkkijono, joka on yhdistelmä pieniä ja isoja kirjaimia jäsenmuuttujassa nimeltä "tutorialName", ja liitämme sen laajuusobjektiin. Välitetyn merkkijonon arvo on "AngularJS".
- Käytämme jäsenmuuttujaa "tutorialName" ja laitamme suodatinsymbolin (|), mikä tarkoittaa, että lähtöä on muutettava suodattimella. Sitten käytämme pientä avainsanaa sanomaan, että käytämme sisäänrakennettua suodatinta koko merkkijonon tuottamiseen pienillä kirjaimilla.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan nähdä, että merkkijono "AngularJS", joka välitettiin muuttujassa tutorialName, joka oli yhdistelmä pieniä ja isoja kirjaimia, on suoritettu.
- Suorituksen jälkeen lopullinen tulos on pientä, kuten yllä on esitetty.
Isokokoinen suodatin kulmassaJS
Tämä suodatin on samanlainen kuin pienet kirjaimet; ero on siinä, että merkkijono tulostaa ja muotoilee merkkijonon ja näyttää kaikki merkkijonon merkit isoin kirjaimin.
Katsotaanpa esimerkkiä isojen kirjainten suodattimesta AngularJS pienillä kirjaimilla.
Seuraavassa AngularJS-isojen kirjainten esimerkissä käytämme ohjainta lähettämään merkkijono näkymään laajuusobjektin kautta. Sitten muokkaamme merkkijonon isoin kirjaimin suodattimen avulla näkymässä.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Koodin selitys:
- Tässä välitetään merkkijono, joka on yhdistelmä pieniä ja isoja kirjaimia "Angular JS" jäsenmuuttujassa nimeltä "tutorialName", ja liitämme sen laajuusobjektiin.
- Käytämme jäsenmuuttujaa "tutorialName" ja laitamme suodatinsymbolin (|), mikä tarkoittaa, että lähtöä on muutettava suodattimella. Sitten käytämme isoa avainsanaa sanomaan, että sisäisen suodattimen avulla tuotetaan koko merkkijono isoilla kirjaimilla.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan nähdä, että merkkijono, joka välitettiin muuttujassa tutorialName, joka oli yhdistelmä pieniä ja isoja kirjaimia, on annettu kaikissa isoissa kirjaimissa.
Numerosuodatin kulmassaJS
Tämä suodatin muotoilee luvun ja voi soveltaa rajoitusta luvun desimaalipisteisiin.
Katsotaanpa esimerkkiä AngularJS-suodattimista numerovaihtoehdolla.
Alla olevassa esimerkissä
Halusimme esitellä, kuinka voimme käyttää numerosuodatinta muotoilemaan numero näytettäväksi kahden desimaalin tarkkuudella.
Käytämme ohjainta lähettämään numeron näkymään laajuusobjektin kautta. Käytämme sitten suodatinta näkymässä lukusuodattimen soveltamiseen.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Koodin selitys:
- Tässä välitetään numero, jolla on suurempi desimaalien määrä jäsenmuuttujassa nimeltä tutorialID, ja liitämme sen laajuusobjektiin.
- Käytämme jäsenmuuttujaa tutorialID ja asetamme suodatinsymbolin (|) numerosuodattimen kanssa. Nyt numerossa: 2 nämä kaksi osoittavat, että suodattimen pitäisi rajoittaa desimaalien lukumäärä 2: een.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan nähdä, että muuttujassa tutorialID, jolla oli paljon desimaalipisteitä, välitetty määrä on rajoitettu kahteen desimaaliin numeron 2 käyttämän suodattimen takia.
Valuuttasuodatin kulmassaJS
Tämä suodatin muotoilee valuuttasuodattimen numeroksi.
Oletetaan, että jos haluat näyttää numeron valuutalla, kuten $, niin tätä suodatinta voidaan käyttää.
Seuraavassa esimerkissä käytämme ohjainta lähettämään numero näkymään laajuusobjektin kautta. Käytämme sitten suodatinta näkymässä nykyisen suodattimen soveltamiseksi.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Koodin selitys:
- Tässä välitämme numeron jäsenmuuttujassa nimeltä tutorialprice ja liitämme sen laajuusobjektiin.
- Käytämme jäsenmuuttujan opetushintaa ja asetamme suodatinsymbolin (|) yhdessä valuuttasuodattimen kanssa. Huomaa, että käytetty valuutta riippuu koneeseen sovelletuista kieliasetuksista.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan nähdä, että valuuttasymboli on liitetty muuttujan opetushinnassa välitettyyn numeroon.
- Meidän tapauksessamme, koska kieliasetukset ovat englanti (Yhdysvallat), $ -merkki lisätään valuuttana.
JSON-suodatin kulmassaJS
Tämä suodatin muotoilee JSON-tyyppisen tulon ja käyttää AngularJS JSON -suodatinta antamaan lähdön JSON-muodossa.
Seuraavassa esimerkissä käytämme ohjainta lähettämään JSON-tyyppinen objekti näkymään laajuusobjektin kautta. Sitten käytämme näkymässä suodatinta JSON-suodattimen soveltamiseen.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Koodin selitys:
- Tässä välitämme numeron jäsenmuuttujassa nimeltä "opetusohjelma" ja liitämme sen laajuusobjektiin. Tämä jäsenmuuttuja sisältää JSON-tyyppisen merkkijonon Tutorial ID: 12 ja TutorialName: "Angular".
- Käytämme jäsenmuuttujan opetusohjelmaa ja laitamme suodatinsymbolin (|) yhdessä JSON-suodattimen kanssa.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan nähdä, että JSON merkkijonon muodossa on jäsennelty ja esittänyt oikean JSON-objektin selaimessa.
Yhteenveto:
- Suodattimia käytetään muuttamaan tapaa, jolla tuotos näytetään käyttäjälle.
- Kulma sisältää sisäänrakennetut suodattimet, kuten pienet kirjaimet ja isot kirjaimet, jotta merkkijonot voidaan muuttaa pieniksi ja suuriksi.
- On myös säännös, jolla muutetaan tapaa, jolla numerot näytetään, käyttämällä numerosuodatinta määrittämällä numerossa näytettävien desimaalipisteiden määrä.
- Valuuttasuodattimen avulla voidaan liittää valuuttasymboli mihin tahansa numeroon.
- Jos vaaditaan json-spesifistä lähtöä, kulma tarjoaa myös JSON-suodattimen minkä tahansa JSON-tyyppisen merkkijonon suodattamiseksi JSON-muotoon.