Filtri AngularJS e filtro personalizzato AngularJS con esempio
James Hartmann
Cos'è il filtro in AngularJS?
A Filtra in AngularJS aiuta a formattare il valore di un'espressione da visualizzare all'utente senza modificare il formato originale. Ad esempio, se desideri che la stringa sia in minuscolo o in maiuscolo, puoi farlo utilizzando i filtri. Esistono filtri integrati come "minuscolo", "maiuscolo", che possono recuperare di conseguenza l'output in lettere minuscole e maiuscole.
Filtro personalizzato AngularJS
A volte i filtri integrati in Angular non possono soddisfare le esigenze o i requisiti per il filtraggio dell'output. In tal caso, è possibile creare un filtro personalizzato AngularJS, che può trasmettere l'output nel modo richiesto.
Allo stesso modo, per i numeri, puoi utilizzare altri filtri. Durante questo tutorial vedremo i diversi filtri integrati standard disponibili in Angular.
Come creare un filtro personalizzato in AngularJS
Nell'esempio seguente del filtro personalizzato AngularJS, passeremo una stringa alla vista dal controller tramite l'oggetto scope, ma non vogliamo che la stringa venga visualizzata così com'è.
Vogliamo garantire che ogni volta che visualizziamo la stringa, passeremo un filtro personalizzato AngularJS, che aggiungerà un'altra stringa e visualizzerà la stringa completata all'utente.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.filter('Demofilter',function(){
return function(input)
{
return input + " Tutorial"
}
});
app.controller('DemoController',function($scope){
$scope.tutorial ="Angular";
});
</script>
</body>
</html>
Spiegazione del codice
- Qui stiamo passando una stringa "Angular" in una variabile membro chiamata tutorial e allegandola all'oggetto scope.
- Angular fornisce il servizio di filtro che può essere utilizzato per creare il nostro filtro personalizzato. Il "Demofiltro" è il nome dato al nostro filtro.
- Questo è il modo standard in cui vengono definiti i filtri personalizzati in AngularJS in cui viene restituita una funzione. Questa funzione è ciò che contiene il codice personalizzato per creare il filtro personalizzato. Nella nostra funzione, stiamo prendendo una stringa "Angular" che viene passata dalla nostra vista al filtro e aggiungendovi la stringa "Tutorial".
- Stiamo utilizzando il nostro Demofilter sulla nostra variabile membro che è stata passata dal controller alla vista.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere che il nostro filtro personalizzato è stato applicato e
- La parola "Tutorial" è stata aggiunta alla fine della stringa, che è stata passata nella variabile membro tutorial.
Filtro minuscolo in AngularJS
Questo filtro accetta un output di stringa, formatta la stringa e visualizza tutti i caratteri nella stringa in minuscolo.
Diamo un'occhiata a un esempio di filtri AngularJS con l'opzione AngularJS in minuscolo.
Nell'esempio seguente, utilizzeremo 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName | lowercase}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialName ="Angular JS";
});
</script>
</body>
</html>
Spiegazione del codice
- Qui stiamo passando una stringa, che è una combinazione di caratteri minuscoli e maiuscoli in una variabile membro chiamata "tutorialName" e la alleghiamo all'oggetto scope. Il valore della stringa passata è "AngularJS".
- Stiamo utilizzando la variabile membro "tutorialName" e inserendo un simbolo di filtro (|), il che significa che l'output deve essere modificato utilizzando un filtro. Utilizziamo quindi la parola chiave lowercase per dire di utilizzare il filtro integrato per restituire l'intera stringa in minuscolo.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
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 minuscolo; la differenza è che accetta un output di stringa e formatta la stringa e visualizza tutti i caratteri nella stringa in maiuscolo.
Diamo un'occhiata ad un esempio di filtro maiuscolo AngularJS con l'opzione minuscola.
Nell'esempio di capitalizzazione di AngularJS riportato di seguito, utilizzeremo un controller per inviare una stringa a una vista tramite l'oggetto scope. Utilizzeremo quindi un filtro nella vista per convertire la stringa in maiuscolo.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName | uppercase}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialName ="Angular JS";
});
</script>
</body>
</html>
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 la alleghiamo 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. Utilizziamo quindi la parola chiave maiuscolo per dire di utilizzare il filtro integrato per restituire l'intera stringa in maiuscolo.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere che la stringa passata nella variabile tutorialName, che era una combinazione di caratteri minuscoli e maiuscoli, è stata emessa tutta in maiuscolo.
Filtro numerico in AngularJS
Questo filtro formatta un numero e può applicare un limite ai punti decimali per un numero.
Diamo un'occhiata ad un esempio di filtri AngularJS con l'opzione number.
Nell'esempio seguente,
Volevamo mostrare come possiamo utilizzare il filtro numerico per formattare un numero da visualizzare con una limitazione di 2 cifre decimali.
Utilizzeremo un controller per inviare un numero a una vista tramite l'oggetto scope. Utilizzeremo quindi un filtro nella vista per applicare il filtro numerico.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialID =3.565656;
});
</script>
</body>
</html>
Spiegazione del codice
- Qui stiamo passando un numero con un numero maggiore di cifre decimali in una variabile membro chiamata tutorialID e allegandolo all'oggetto scope.
- Stiamo utilizzando la variabile membro tutorialID e inserendo un simbolo di filtro (|) insieme al filtro numerico. Ora nel numero:2, il due indica che il filtro dovrebbe limitare il numero di cifre decimali a 2.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere che il numero passato nella variabile tutorialID che aveva un gran numero di punti decimali è stato limitato a 2 cifre decimali a causa del numero: 2 filtri applicati.
Filtro valuta in AngularJS
Questo filtro formatta un filtro valuta in un numero.
Supponiamo che se desideri visualizzare un numero con una valuta come $, è possibile utilizzare questo filtro.
Nell'esempio seguente, utilizzeremo un controller per inviare un numero a una vista tramite l'oggetto scope. Utilizzeremo quindi un filtro nella vista per applicare il filtro corrente.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorialprice =20.56;
});
</script>
</body>
</html>
Spiegazione del codice
- Qui stiamo passando un numero in una variabile membro chiamata tutorialprice e allegandola all'oggetto scope.
- Stiamo utilizzando la variabile membro tutorialprice e inserendo un simbolo di filtro (|) insieme al filtro valuta. Si noti che la valuta applicata dipende dalle impostazioni della lingua applicate alla macchina.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita
- Si può vedere che il simbolo della valuta è stato aggiunto al numero passato nella variabile tutorialprice.
- Nel nostro caso, poiché la lingua impostata è l'inglese (Stati Uniti), come valuta viene inserito il simbolo $.
Filtro JSON in AngularJS
Questo filtro formatta a JSON come input e applica il filtro AngularJS JSON per fornire l'output in JSON.
Nell'esempio seguente, utilizzeremo 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
});
</script>
</body>
</html>
Spiegazione del codice
- Qui stiamo passando un numero in una variabile membro chiamata "tutorial" e allegandolo all'oggetto scope. Questa variabile membro contiene una stringa di tipo JSON con ID Tutorial:12 e NomeTutorial:”Angular”.
- Stiamo utilizzando il tutorial sulle variabili membro e inserendo un simbolo di filtro (|) insieme al filtro JSON.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere che il JSON come una stringa viene analizzato e visualizzato come oggetto JSON corretto nel browser.
Sintesi
- I filtri vengono utilizzati per modificare il modo in cui l'output viene visualizzato all'utente.
- Angular fornisce filtri integrati 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 numerico 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 avere un output specifico JSON, angular fornisce anche il filtro JSON per filtrare qualsiasi stringa simile a JSON nel formato JSON.
- Se esiste un requisito che non è soddisfatto da nessuno dei filtri definiti in angular, puoi creare il tuo filtro personalizzato e aggiungere il tuo codice personalizzato per determinare il tipo di output che desideri dal filtro.
