Cos'è il filtro in AngularJS?
Un filtro in AngularJS aiuta a formattare il valore di un'espressione da visualizzare all'utente senza modificare il formato originale. Ad esempio, se vuoi che la tua stringa sia in minuscolo o maiuscolo, puoi farlo usando i filtri. Ci sono filtri incorporati come "minuscolo", "maiuscolo", che possono recuperare l'output in minuscolo e maiuscolo di conseguenza.
Allo stesso modo, per i numeri, puoi utilizzare altri filtri.
Durante questo tutorial, vedremo i diversi filtri integrati standard disponibili in Angular.
In questo tutorial imparerai-
- Filtro minuscolo in AngularJS
- Filtro maiuscolo in AngularJS
- Filtro numerico in AngularJS
- Filtro valuta in AngularJS
- Filtro JSON in AngularJS
Filtro minuscolo in AngularJS
Questo filtro accetta un output di stringa e formatta la stringa e visualizza tutti i caratteri nella stringa come minuscoli.
Diamo un'occhiata a un esempio di filtri AngularJS con l'opzione AngularJS tolowercase.
Nell'esempio seguente, useremo un controller per inviare una stringa a una vista tramite l'oggetto scope. Utilizzeremo quindi un filtro nella vista per convertire la stringa in minuscolo.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Spiegazione del codice:
- Qui stiamo passando una stringa, che è una combinazione di caratteri minuscoli e maiuscoli in una variabile membro chiamata "tutorialName" e allegandola all'oggetto scope. Il valore della stringa passata è "AngularJS".
- Stiamo utilizzando la variabile membro "tutorialName" e inserendo un simbolo di filtro (|) che significa che l'output deve essere modificato utilizzando un filtro. Quindi usiamo la parola chiave minuscola per dire di utilizzare il filtro integrato per visualizzare l'intera stringa in minuscolo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita
- Si può vedere che la stringa "AngularJS" che è stata passata nella variabile tutorialName che era una combinazione di caratteri minuscoli e maiuscoli è stata eseguita.
- Dopo l'esecuzione, l'output finale è in minuscolo come mostrato sopra.
Filtro maiuscolo in AngularJS
Questo filtro è simile al filtro in minuscolo; la differenza è che assume un output di stringa e formatta la stringa e visualizza tutti i caratteri nella stringa in maiuscolo.
Diamo un'occhiata a un esempio di filtro in maiuscolo AngularJS con l'opzione minuscolo.
Nell'esempio in maiuscolo di AngularJS di seguito, useremo un controller per inviare una stringa a una vista tramite l'oggetto scope. Useremo quindi un filtro nella vista per convertire la stringa in maiuscolo.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Spiegazione del codice:
- Qui stiamo passando una stringa che è una combinazione di caratteri minuscoli e maiuscoli "Angular JS" in una variabile membro chiamata "tutorialName" e allegandola all'oggetto scope.
- Stiamo utilizzando la variabile membro "tutorialName" e inserendo un simbolo di filtro (|), il che significa che l'output deve essere modificato utilizzando un filtro. Quindi usiamo la parola chiave maiuscolo per dire di usare il filtro integrato per visualizzare l'intera stringa in maiuscolo.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere che la stringa che è stata passata nella variabile tutorialName che era una combinazione di caratteri minuscoli e maiuscoli è stata emessa in tutte le maiuscole.
Filtro numerico in AngularJS
Questo filtro formatta un numero e può applicare un limite ai punti decimali per un numero.
Diamo un'occhiata a un esempio di filtri AngularJS con l'opzione numero.
Nell'esempio seguente,
Volevamo mostrare come possiamo utilizzare il filtro dei numeri per formattare un numero da visualizzare con una restrizione di 2 cifre decimali.
Useremo un controller per inviare un numero a una vista tramite l'oggetto ambito. Utilizzeremo quindi un filtro nella vista per applicare il filtro del numero.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Spiegazione del codice:
- Qui stiamo passando un numero con un numero maggiore di posizioni decimali in una variabile membro chiamata tutorialID e lo colleghiamo all'oggetto scope.
- Stiamo utilizzando la variabile membro tutorialID e inserendo un simbolo di filtro (|) insieme al filtro numerico. Ora in numero: 2, i due indicano che il filtro dovrebbe limitare il numero di cifre decimali a 2.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere che il numero che è stato passato nella variabile tutorialID che aveva un gran numero di punti decimali è stato limitato a 2 cifre decimali a causa del numero: 2 filtri che è stato applicato.
Filtro valuta in AngularJS
Questo filtro formatta un filtro di valuta in un numero.
Supponiamo che, se si desidera visualizzare un numero con una valuta come $, è possibile utilizzare questo filtro.
Nell'esempio seguente useremo un controller per inviare un numero a una vista tramite l'oggetto scope. Utilizzeremo quindi un filtro nella vista per applicare il filtro corrente.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Spiegazione del codice:
- Qui stiamo passando un numero in una variabile membro chiamata tutorialprice e lo colleghiamo all'oggetto scope.
- Stiamo utilizzando la variabile membro tutorialprice e inserendo un simbolo di filtro (|) insieme al filtro di valuta. Notare che la valuta applicata dipende dalle impostazioni della lingua applicate alla macchina.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita
- Si può vedere che il simbolo della valuta è stato aggiunto al numero passato nella variabile tutorialprice.
- Nel nostro caso, poiché le impostazioni della lingua sono l'inglese (Stati Uniti), il simbolo $ viene inserito come valuta.
Filtro JSON in AngularJS
Questo filtro formatta un input simile a JSON e applica il filtro JSON AngularJS per fornire l'output in JSON.
Nell'esempio seguente useremo un controller per inviare un oggetto di tipo JSON a una vista tramite l'oggetto scope. Utilizzeremo quindi un filtro nella vista per applicare il filtro JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Spiegazione del codice:
- Qui stiamo passando un numero in una variabile membro chiamata "tutorial" e lo colleghiamo all'oggetto scope. Questa variabile membro contiene una stringa di tipo JSON di ID tutorial: 12 e TutorialName: "Angular".
- Stiamo utilizzando l'esercitazione sulla variabile membro e inserendo un simbolo di filtro (|) insieme al filtro JSON.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere che il JSON come una stringa viene analizzato e visualizzato nel browser un oggetto JSON appropriato.
Sommario:
- I filtri vengono utilizzati per modificare il modo in cui l'output viene visualizzato all'utente.
- Angular fornisce filtri incorporati come i filtri minuscolo e maiuscolo per modificare l'output delle stringhe rispettivamente in minuscolo e maiuscolo.
- È inoltre possibile modificare la modalità di visualizzazione dei numeri utilizzando il filtro dei numeri specificando il numero di punti decimali da visualizzare nel numero.
- È inoltre possibile utilizzare il filtro valuta per aggiungere il simbolo della valuta a qualsiasi numero.
- Se è necessario disporre di un output specifico JSON, angular fornisce anche il filtro JSON per filtrare qualsiasi stringa simile a JSON nel formato JSON.