Filtri AngularJS e filtro personalizzato AngularJS con esempio
James Hartmann
⚡ Riepilogo intelligente
In AngularJS, un filtro formatta il valore di un'espressione per la visualizzazione senza alterare i dati sottostanti. I filtri integrati gestiscono maiuscole e minuscole, numeri, valute e JSON, mentre un filtro personalizzato gestisce qualsiasi regola di formattazione non fornita dal framework.
Cos'è il filtro in AngularJS?
A Filtra in AngularJS Consente di formattare il valore di un'espressione per la visualizzazione all'utente senza modificarne il valore originale. Ad esempio, se si desidera che una stringa venga visualizzata in minuscolo o in maiuscolo, è possibile farlo utilizzando i filtri. I filtri integrati come 'lowercase' e 'uppercase' restituiscono la stringa nel formato richiesto, e sono disponibili ulteriori filtri per numeri, valute e JSON.
⚠️ Nota sulla versione: AngularJS (versione 1.x) ha raggiunto la fine del suo ciclo di vita il 31 dicembre 2021 e non riceve ulteriori patch di sicurezza. Tutto quanto segue rimane valido per la manutenzione delle applicazioni AngularJS esistenti; nelle versioni moderne di Angular, la stessa funzione è svolta da una pipe.
I filtri vengono applicati nella vista con il carattere pipe. Prima di esaminarli uno per uno, è utile capire perché si potrebbe decidere di crearne uno personalizzato.
Filtro minuscolo in AngularJS
Questo filtro prende una stringa e visualizza tutti i suoi caratteri in minuscolo.
Di seguito, un controller invia una stringa alla vista tramite l'oggetto scope e un filtro la converte in minuscolo.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code Spiegazione
- La stringa con lettere maiuscole e minuscole "Angular JS" viene inserita in una variabile membro chiamata
tutorialNamesull'oggetto ambito. - Il simbolo del filtro (|) contrassegna l'output per la trasformazione e il
lowercaseLa parola chiave applica il filtro integrato che converte l'intera stringa in minuscolo.
⚠️ Sono state apportate correzioni a ogni annuncio. Tutti e sei gli esempi originali presentavano tre difetti in comune. chrset="UTF 8" non è un attributo o una codifica validi e ora è charset="UTF-8". angular-route.js caricato prima angular.min.js, che genera un errore del modulo e non è mai stato utilizzato — è stato rimosso, così come il riferimento jQuery inutilizzato. Il testo affermava inoltre che il valore era "AngularJS" mentre il codice impostava "Angular JS"; ora il testo corrisponde.
Produzione:
La stringa con lettere maiuscole e minuscole viene visualizzata interamente in minuscolo. La trasformazione inversa funziona allo stesso modo.
Filtro maiuscolo in AngularJS
Questo filtro è la controparte del filtro minuscolo e visualizza ogni carattere in maiuscolo.
Di seguito, un controller invia una stringa alla vista tramite l'oggetto scope e un filtro la converte in maiuscolo.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code Spiegazione
- La stringa con lettere maiuscole e minuscole “Angular JS” è inserita in
tutorialNamee collegato all'oggetto ambito. - Il simbolo del filtro (|) è seguito dal
uppercaseparola chiave, quindi il filtro integrato converte l'intera stringa in maiuscolo.
⚠️ Correzione: La versione originale presentava questa sezione come "un esempio di filtro per la capitalizzazione in AngularJS con l'opzione minuscola", il che è doppiamente errato. Questa sezione mostra il filtro per le maiuscole, e AngularJS non ha alcun filtro per la capitalizzazione: per capitalizzare solo la prima lettera è necessario un filtro personalizzato, che le sezioni successive mostrano come creare.
Produzione:
I filtri con distinzione tra maiuscole e minuscole non accettano argomenti. Il filtro successivo mostra come i due punti passano un parametro a un filtro.
Filtro numerico in AngularJS
Questo filtro formatta un numero e può limitare il numero di cifre decimali visualizzate.
L'esempio seguente utilizza il filtro numerico per visualizzare un valore limitato a due cifre decimali. Un controller invia il numero alla vista tramite l'oggetto scope e il filtro viene applicato nella vista.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code Spiegazione
- Un numero con molte cifre decimali viene inserito in una variabile membro chiamata
tutorialIDe collegato all'oggetto ambito. - Il simbolo del filtro (|) è seguito da
number:2I due punti passano un argomento e il 2 imposta due cifre decimali. Il valore viene arrotondato per la visualizzazione, quindi 3.565656 appare come 3.57 mentre l'ambito mantiene il numero intero.
Produzione:
Formattare un semplice numero spesso non è sufficiente quando il valore rappresenta denaro, che è ciò che gestisce il filtro successivo.
Filtro valuta in AngularJS
Questo filtro formatta un numero come valore di valuta, anteponendovi un simbolo di valuta come $.
Nell'esempio seguente, un controller invia un numero alla vista tramite l'oggetto scope e il filtro valuta viene applicato nella vista.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code Spiegazione
- Un numero viene inserito in una variabile membro chiamata
tutorialpricee collegato all'oggetto ambito. - Il simbolo del filtro (|) è seguito dal
currencyfiltro.
⚠️ Correzione: L'originale affermava che la valuta "dipende dalle impostazioni della lingua applicate alla macchina". Non è così. AngularJS utilizza le impostazioni locali incluse nella libreria, en-US per impostazione predefinita, quindi il simbolo è $ indipendentemente dal sistema operativo. Carica il corrispondente angular-locale_*.js file oppure passa direttamente il simbolo: {{tutorialprice | currency:"£"}}.
Produzione:
Le stringhe e i numeri sono valori semplici. Il filtro integrato finale gestisce oggetti interi.
Filtro JSON in AngularJS
Questo filtro converte un oggetto in un formato JSON stringa, utile per ispezionare i dati di ambito durante lo sviluppo.
Nell'esempio seguente, un controller invia un oggetto alla vista tramite l'oggetto scope e il filtro JSON viene applicato nella vista.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code Spiegazione
- Un oggetto che contiene
TutorialID: 12andtutorialName: "Angular"viene inserito in una variabile membro chiamatatutoriale collegato all'oggetto ambito. - Il simbolo del filtro (|) è seguito dal
jsonfiltro che serializza l'oggetto in testo JSON indentato.
⚠️ Correzione: l'originale descriveva questo valore come "un numero" e come "una stringa di tipo JSON". Non è né l'uno né l'altro. È un JavaL'oggetto script è quello che lo converte in una stringa JSON per la visualizzazione.
Produzione:
Questi cinque filtri coprono i casi più comuni. Se nessuno di essi produce l'output desiderato, è possibile crearne uno personalizzato.
Filtro personalizzato AngularJS
A volte i filtri integrati in AngularJS non soddisfano i requisiti di formattazione dell'output. In tal caso, è possibile creare un filtro personalizzato in AngularJS che restituisca l'output nel formato richiesto.
Un filtro personalizzato viene registrato su un modulo e si comporta esattamente come un filtro predefinito. Le sezioni seguenti descrivono prima i filtri standard, poiché un filtro personalizzato utilizza la stessa sintassi con la barra verticale, e poi mostrano come crearne uno.
Come creare un filtro personalizzato in AngularJS
Nell'esempio seguente, una stringa passa da controllore alla vista tramite l'oggetto scope, ma non dovrebbe essere visualizzato così com'è. Un filtro personalizzato in AngularJS aggiunge un'altra stringa e visualizza il risultato finale.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code Spiegazione
- La stringa “Angular” viene inserita in una variabile membro chiamata
tutoriale collegato all'oggetto ambito. - AngularJS fornisce il
filterMetodo di registrazione utilizzato per creare un filtro personalizzato. Il nome assegnatogli è "Demofilter", ed è a questo nome che fa riferimento la vista. - Questa è la forma standard di un filtro personalizzato: la funzione registrata è un fabbrica restituisce la funzione che esegue l'operazione. Tale funzione riceve il valore da filtrare come primo parametro e restituisce il risultato, in questo caso l'input con l'aggiunta di "Tutorial".
- Il filtro viene applicato nella vista utilizzando la stessa sintassi con la barra verticale (pipe) di qualsiasi filtro predefinito.
💡 Suggerimento: I nomi dei filtri sono convenzionalmente in minuscolo o in camelCase. 'Demofilter' funziona, ma un nome come appendTutorial risulta più leggibile ed evita conflitti con un nome predefinito.
Produzione:
La parola 'Tutorial' è stata aggiunta alla stringa passata nel tutorial variabile. Questo filtro aggiunge sempre lo stesso testo, che verrà reso configurabile nella sezione successiva.
Come passare argomenti a un filtro personalizzato
Il filtro sopra codifica in modo rigido il testo che aggiunge, quindi può fare solo una cosa. I filtri integrati come number:2 accetta un argomento dopo i due punti, e lo stesso vale per un filtro personalizzato: ogni parametro dopo il primo corrisponde a un argomento separato da due punti nella vista.
Sono coinvolti tre passaggi: aggiungere i parametri dopo input Nella funzione restituita, fornisci un valore predefinito per qualsiasi elemento opzionale in modo che il filtro funzioni comunque anche quando l'argomento viene omesso, quindi passa gli argomenti nella vista separati da due punti.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
La vista quindi si legge come segue, dove “Tutorial” diventa suffix e il trattino diventa separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Due dettagli sono facili da trascurare. Gli argomenti sono espressioni AngularJS, quindi una stringa letterale deve essere racchiusa tra virgolette, mentre una parola non racchiusa tra virgolette viene letta come una proprietà di scope. Anche i filtri sono concatenati, ognuno dei quali riceve l'output del precedente: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Attenzione: Mantieni un filtro puro: stesso output per lo stesso input, nessuna modifica esterna. AngularJS memorizza nella cache un filtro puro e lo riesegue solo quando l'input cambia. Un filtro che legge l'orologio o modifica un servizio deve essere contrassegnato $stateful, che disabilita la memorizzazione nella cache ed esegue il filtro ad ogni ciclo di digest, una causa comune di pagine lente.
I filtri non sono limitati ai modelli. Lo stesso filtro può essere richiamato da JavaScript, come mostrato di seguito.
Come utilizzare i filtri in un controller con il servizio $filter
Applicare un filtro nella vista è il caso comune, ma il valore trasformato è talvolta necessario all'interno del controller, ad esempio prima di inviare i dati a un server. AngularJS espone ogni filtro registrato, integrato e personalizzato, attraverso il $filter servizio. Iniettalo, chiamalo con il nome del filtro per recuperare la funzione di filtro, quindi invocala con il valore e gli eventuali argomenti.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Esiste anche una forma più breve: iniettando il nome del filtro seguito da Filter, come uppercaseFilter, fornisce direttamente la funzione di filtro e può essere chiamata immediatamente. Entrambe le forme si risolvono nella stessa funzione, quindi la scelta è stilistica.
Due utilizzi ricorrono ripetutamente. Il primo è la preparazione di un payload: una data di solito deve raggiungere un'API secondo uno schema fisso e $filter('date')(value, 'yyyy-MM-dd') lo produce senza toccare il valore associato al modulo. Il secondo consiste nel restringere una collezione una volta nel controller, piuttosto che lasciarla orderBy Organizza una ng-ripetere espressione in cui viene eseguita nuovamente ad ogni digest.
I filtri iniettati in questo modo sono ancora registrati sul modulo, quindi un filtro personalizzato deve essere dichiarato con app.filter prima che qualsiasi controllore chieda $filter per questo. Altrimenti AngularJS genera un errore di provider sconosciuto.
Chiamata di un filtro in JavaLo script si differenzia da un modello in un modo importante: il risultato viene calcolato una sola volta e memorizzato nell'ambito anziché essere ricalcolato ad ogni digest. Questo lo rende l'opzione più veloce per un valore che cambia raramente e l'opzione sbagliata per uno che deve track input utente.
