Ce este Filter în AngularJS?
Un filtru în AngularJS ajută la formatarea valorii unei expresii pentru a fi afișată utilizatorului fără a modifica formatul original. De exemplu, dacă doriți ca șirul dvs. să fie în litere mici sau mari, îl puteți face folosind filtre. Există filtre încorporate, cum ar fi „minuscule”, „majuscule”, care pot prelua rezultatele minuscule și majuscule în consecință.
În mod similar, pentru numere, puteți utiliza alte filtre.
În timpul acestui tutorial, vom vedea diferitele filtre standard încorporate disponibile în Angular.
În acest tutorial, veți învăța-
- Filtru cu litere mici în AngularJS
- Filtru cu majuscule în AngularJS
- Filtru numeric în AngularJS
- Filtru valutar în AngularJS
- Filtru JSON în AngularJS
Filtru cu litere mici în AngularJS
Acest filtru preia o ieșire de șir și formatează șirul și afișează toate caracterele din șir ca minuscule.
Să vedem un exemplu de filtre AngularJS cu opțiunea AngularJS tolowercase.
În exemplul de mai jos, vom folosi un controler pentru a trimite un șir către o vizualizare prin intermediul obiectului scop. Vom folosi apoi un filtru în vizualizare pentru a converti șirul în minuscule.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Explicatie cod:
- Aici trecem un șir, care este o combinație de caractere mici și majuscule într-o variabilă membru numită „tutorialName” și o atașăm la obiectul scop. Valoarea șirului care este trecut este „AngularJS”.
- Folosim variabila membru „tutorialName” și punem un simbol de filtrare (|) ceea ce înseamnă că ieșirea trebuie modificată folosind un filtru. Apoi folosim cuvântul cheie cu litere mici pentru a spune că folosim filtrul încorporat pentru a afișa întregul șir cu litere mici.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire
- Se poate vedea că a fost executat șirul „AngularJS” care a fost trecut în variabila tutorialName care a fost o combinație de caractere mici și majuscule.
- După executare, ieșirea finală este cu litere mici, așa cum se arată mai sus.
Filtru cu majuscule în AngularJS
Acest filtru este similar cu filtrul cu litere mici; diferența este că preia o ieșire de șir și formatează șirul și afișează toate caracterele din șir ca majuscule.
Să vedem un exemplu de filtrare cu majuscule AngularJS cu opțiunea cu litere mici.
În exemplul de mai jos cu majuscule AngularJS, vom folosi un controler pentru a trimite un șir către o vizualizare prin intermediul obiectului scop. Vom folosi apoi un filtru în vizualizare pentru a converti șirul în majuscule.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Explicatie cod:
- Aici trecem un șir care este o combinație de caractere mici și majuscule „Angular JS” într-o variabilă membru numită „tutorialName” și o atașăm la obiectul scop.
- Folosim variabila membru „tutorialName” și punem un simbol de filtrare (|), ceea ce înseamnă că ieșirea trebuie modificată folosind un filtru. Apoi folosim cuvântul cheie cu majuscule pentru a spune că folosim filtrul încorporat pentru a afișa întregul șir în majuscule.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea că șirul care a fost trecut în variabila tutorialName, care a fost o combinație de caractere mici și majuscule, a fost trimis în toate majusculele.
Filtru numeric în AngularJS
Acest filtru formatează un număr și poate aplica o limită punctelor zecimale pentru un număr.
Să vedem un exemplu de filtre AngularJS cu opțiunea numerică.
În exemplul de mai jos,
Am vrut să prezentăm cum putem folosi filtrul numeric pentru a formata un număr pe care să-l afișăm cu o restricție de 2 zecimale.
Vom folosi un controler pentru a trimite un număr către o vizualizare prin intermediul obiectului scop. Vom folosi apoi un filtru în vizualizare pentru a aplica filtrul numeric.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Explicatie cod:
- Aici trecem un număr cu un număr mai mare de zecimale într-o variabilă membru numită tutorialID și o atașăm la obiectul scop.
- Folosim variabila membru tutorialID și punem un simbol de filtrare (|) împreună cu filtrul numeric. Acum, la număr: 2, cele două indică faptul că filtrul ar trebui să limiteze numărul de zecimale la 2.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea că numărul care a fost trecut în variabila tutorialID care avea un număr mare de zecimale a fost limitat la 2 zecimale din cauza numărului: 2 filtre care a fost aplicat.
Filtru valutar în AngularJS
Acest filtru formează un filtru valutar la un număr.
Să presupunem că, dacă doriți să afișați un număr cu o monedă precum $, atunci acest filtru poate fi utilizat.
În exemplul de mai jos vom folosi un controler pentru a trimite un număr către o vizualizare prin intermediul obiectului scop. Vom folosi apoi un filtru în vizualizare pentru a aplica filtrul curent.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Explicatie cod:
- Aici trecem un număr într-o variabilă membru numită tutorialprice și o atașăm la obiectul scop.
- Folosim variabila membru tutorialprice și punem un simbol de filtrare (|) împreună cu filtrul valutar. Rețineți că moneda aplicată depinde de setările de limbă aplicate aparatului.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire
- Se poate vedea că simbolul monedei a fost adăugat la numărul care a fost trecut în variabila preț tutorial.
- În cazul nostru, deoarece setările de limbă sunt engleza (Statele Unite), simbolul $ este inserat ca monedă.
Filtru JSON în AngularJS
Acest filtru formează o intrare de tip JSON și aplică filtrul AngularJS JSON pentru a da ieșirea în JSON.
În exemplul de mai jos vom folosi un controler pentru a trimite un obiect de tip JSON către o vizualizare prin intermediul obiectului scop. Vom folosi apoi un filtru în vizualizare pentru a aplica filtrul JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Explicatie cod:
- Aici trecem un număr într-o variabilă membru numită „tutorial” și o atașăm la obiectul scop. Această variabilă membru conține un șir de tip JSON de ID tutorial: 12 și TutorialName: "Angular".
- Folosim tutorialul pentru variabila membru și punem un simbol de filtrare (|) împreună cu filtrul JSON.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea că JSON ca un șir este analizat și afișat un obiect JSON adecvat în browser.
Rezumat:
- Filtrele sunt folosite pentru a schimba modul în care ieșirea este afișată utilizatorului.
- Angular oferă filtre încorporate, cum ar fi filtrele minuscule și majuscule, pentru a schimba ieșirea șirurilor de caractere în minusculă și respectiv în majuscule.
- Există, de asemenea, o prevedere pentru modificarea modului în care numerele sunt afișate utilizând filtrul numeric, specificând numărul de puncte zecimale care trebuie afișate în număr.
- Se poate utiliza și filtrul valutar pentru a adăuga simbolul monedei la orice număr.
- Dacă există cerința de a avea o ieșire specifică json, unghiular oferă, de asemenea, filtrul JSON pentru filtrarea oricărui șir JSON în format JSON.