Što je filtar u AngularJS?
Filter u AngularJS pomaže da formatirate vrijednost izraza za prikaz korisniku bez mijenjanja izvorni oblik. Na primjer, ako želite svoj niz u malim ili velikim slovima, to možete učiniti pomoću filtara. Postoje ugrađeni filtri kao što su 'malo', 'veliko', koji u skladu s tim mogu dohvatiti male i velike izlaze.
Slično tome, za brojeve možete koristiti druge filtre.
Tijekom ovog vodiča vidjet ćemo različite standardne ugrađene filtre dostupne u programu Angular.
U ovom vodiču naučit ćete-
- Mali filtar u AngularJS
- Velika slova u AngularJS
- Filtar brojeva u AngularJS
- Filtar valuta u AngularJS
- JSON filtar u AngularJS
Mali filtar u AngularJS
Ovaj filtar uzima izlaz niza i formatira ga te prikazuje sve znakove u nizu malim slovima.
Pogledajmo primjer AngularJS filtara s opcijom AngularJS tolowercase.
U donjem primjeru koristit ćemo kontroler za slanje niza u prikaz putem objekta opsega. Zatim ćemo u prikazu koristiti filtar za pretvaranje niza u mala slova.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Objašnjenje koda:
- Ovdje prolazimo niz koji je kombinacija malih i velikih slova u varijabli člana koja se naziva "tutorialName" i pridružuje ga objektu opsega. Vrijednost niza koji se prosljeđuje je "AngularJS".
- Koristimo člansku varijablu "tutorialName" i stavljamo simbol filtra (|) što znači da izlaz treba mijenjati pomoću filtra. Zatim koristimo malu riječ kako bismo koristili ugrađeni filtar za izlaz cijelog niza malim slovima.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata
- Vidljivo je da je izveden niz "AngularJS" koji je proslijeđen u varijabli tutorialName koja je bila kombinacija malih i velikih slova.
- Nakon izvršenja, konačni je ispis malim slovima kako je prikazano gore.
Velika slova u AngularJS
Ovaj je filtar sličan malom filtru; razlika je u tome što poprima izlazni niz, oblikuje niz i prikazuje sve znakove u nizu kao velika slova.
Pogledajmo primjer velikih i malih slova filtra AngularJS.
U donjem primjeru korištenja velikih slova AngularJS, koristit ćemo kontroler za slanje niza u pogled putem objekta opsega. Zatim ćemo u prikazu koristiti filtar za pretvaranje niza u velika slova.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Objašnjenje koda:
- Ovdje prolazimo niz koji je kombinacija malih i velikih slova "Angular JS" u varijabli člana zvanoj "tutorialName" i pričvršćujemo ga na objekt opsega.
- Koristimo varijablu člana "tutorialName" i stavljamo simbol filtra (|), što znači da izlaz treba mijenjati pomoću filtra. Zatim koristimo ključnu riječ velikim slovima kako bismo rekli da koristimo ugrađeni filtar za izlaz cijelog niza velikim slovima.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- Vidljivo je da je niz koji je proslijeđen u varijabli tutorialName koja je bila kombinacija malih i velikih slova izveden u svim velikim slovima.
Filtar brojeva u AngularJS
Ovaj filtar formatira broj i može primijeniti ograničenje na decimalne točke za broj.
Pogledajmo primjer AngularJS filtara s opcijom broj.
U donjem primjeru,
Željeli smo prikazati kako pomoću filtra brojeva možemo formatirati broj za prikaz s ograničenjem od 2 decimale.
Upotrijebit ćemo kontroler za slanje broja u prikaz putem objekta opsega. Tada ćemo u prikazu koristiti filtar za primjenu filtra brojeva.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Objašnjenje koda:
- Ovdje prosljeđujemo broj s većim brojem decimalnih mjesta u varijabli člana koja se naziva tutorialID i pričvršćujemo ga na objekt opsega.
- Koristimo varijablu člana tutorialID i stavljamo simbol filtra (|) zajedno s filterom brojeva. Sada u broju: 2, to dvoje znači da bi filtar trebao ograničiti broj decimalnih mjesta na 2.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- Vidljivo je da je broj koji je proslijeđen u varijabli tutorialID koja je imala velik broj decimalnih mjesta ograničen na 2 decimale zbog primijenjenih filtera number: 2.
Filtar valuta u AngularJS
Ovaj filtar formatira valutni filtar na broj.
Pretpostavimo, ako ste željeli prikazati broj s valutom kao što je $, tada se ovaj filtar može koristiti.
U donjem primjeru koristit ćemo kontroler za slanje broja u prikaz putem objekta opsega. Zatim ćemo u prikazu koristiti filtar za primjenu trenutnog filtra.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Objašnjenje koda:
- Ovdje prosljeđujemo broj u varijabli člana koja se naziva tutorialprice i pričvršćujemo ga na objekt opsega.
- Koristimo člansku varijablu tutorialprice i stavljamo simbol filtra (|) zajedno s valutnim filtrom. Primijetite da valuta koja se primjenjuje ovisi o postavkama jezika koje se primjenjuju na uređaj.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata
- Vidljivo je da je simbol valute dodan broju koji je proslijeđen u varijabli tutorialprice.
- U našem slučaju, budući da su postavke jezika engleski (Sjedinjene Države), simbol $ umetnut je kao valuta.
JSON filtar u AngularJS
Ovaj filtar formatira ulaz poput JSON-a i primjenjuje AngularJS JSON filtar da daje izlaz u JSON-u.
U donjem primjeru koristit ćemo kontroler za slanje objekta tipa JSON u pogled putem objekta opsega. Zatim ćemo u prikazu koristiti filtar za primjenu JSON filtra.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Objašnjenje koda:
- Ovdje prosljeđujemo broj u varijabli člana koja se naziva "tutorial" i pričvršćujemo ga na objekt opsega. Ova varijabla člana sadrži niz tipa JSON Tutorial ID-a: 12 i TutorialName: "Angular".
- Koristimo vodič za varijablu člana i stavljamo simbol filtra (|) zajedno s JSON filtrom.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
- Može se vidjeti da je JSON poput niza raščlanjen i prikazuje odgovarajući JSON objekt u pregledniku.
Sažetak:
- Filteri se koriste za promjenu načina na koji se izlaz prikazuje korisniku.
- Angular pruža ugrađene filtre kao što su mali i veliki filtri za promjenu izlaza nizova u mala i velika slova.
- Tu je i odredba za promjenu načina prikaza brojeva upotrebom filtra brojeva određivanjem broja decimalnih mjesta koja će se prikazati u broju.
- Pomoću filtra valute možete dodati simbol valute bilo kojem broju.
- Ako postoji zahtjev za izlazom specifičnim za json, angular također nudi JSON filtar za filtriranje bilo kojeg niza poput JSON-a u JSON format.