Filtri nel controller

Gli esempi che abbiamo visto finora riguardano l'utilizzo dei filtri all'interno di una view. Tuttavia, in determinate situazioni può essere necessario formattare i dati tramite codice JavaScript all'interno di un controller. Supponiamo ad esempio di voler assegnare ad una variabile una data in formato ISO. Per prima cosa dobbiamo informare Angular della nostra intenzione di voler utilizzare un il filtro date all'interno del nostro controller:

angular.module("myApp", [])
	.controller("myController",
		function($scope, dateFilter) {
		...
	});

Come possiamo vedere dall'esempio, abbiamo passato dateFilter come secondo parametro della funzione che definisce il nostro controller. Questo meccanismo, detto dependency injection, consente di dichiarare che all'interno di un componente verrà utilizzato un altro componente. Avremo modo di ritornarci nelle prossime puntate dal momento che è una delle caratteristiche fondamentali di AngularJS.

Nel nostro caso abbiamo dichiarato che utilizzeremo il componente dateFilter, che corrisponde al filtro date utilizzato nelle view. In generale, per fare riferimento ad un filtro all'interno di un controller utilizzeremo il nome composto dal nome del filtro utilizzato nella view seguito dal suffisso Filter.

Il componente che rappresenta il filtro è di per sé una funzione JavaScript alla quale passiamo l'oggetto a cui intendiamo applicare il filtro; gli eventuali parametri aggiuntivi del filtro vengono passati dopo il primo argomento. Tornando al nostro esempio, per ottenere la data e ora corrente formattata in formato ISO procederemo nel seguente modo:

var dataISO = dateFilter(Date.now(), "yyyy-MM-ddTHH:mm:ssZ");

Un aspetto importante da tenere presente quando si utilizza un filtro all'interno di un controller invece che in una view è che non possiamo sfruttare direttamente il two-way binding.

Facendo riferimento all'esempio del filtro applicato sull'elenco di città, supponiamo di voler visualizzare quanti sono gli elementi risultanti in seguito all'applicazione del filtro. Potremmo definire una variabile di scope come quella seguente:

$scope.numeroElementi = filterFilter($scope.elencoCitta, {nome: $scope.filtro}).length;

Tuttavia, una volta calcolato il risultato del filtro ed assegnato alla variabile di scope, questa elaborazione non viene più effettuata automaticamente. Vedremo in seguito come poter gestire situazioni come questa.

Filtri personalizzati

Se i filtri predefiniti non sono sufficienti per le nostre esigenze, possiamo costruirci un nostro filtro personalizzato. Supponiamo, ad esempio, di voler creare un filtro che, data una stringa, converta in maiuscolo solo la prima lettera. Il seguente è un esempio di creazione di un filtro del genere:

angular.module("myApp")
	.filter("capitalize",
		function(){
			return function(text) {
				var result = text;
				if (text && isNaN(text)) {
					result = text.charAt(0).toUpperCase() + text.substr(1);
				}
				return result;
			}
		});

Come possiamo vedere, abbiamo utilizzato il metodo filter() per definire il nostro filtro. Il metodo prevede il nome del filtro come primo argomento e una funzione come secondo argomento il cui valore restituito è la funzione che implementa effettivamente il filtro.

La definizione del filtro ci consente di utilizzarlo in una view come nel seguente esempio:

<p>{{"questo è un test" | capitalize}}</p>

ottenendo il seguente risultato:

<p>"Questo è un test"</p>

Naturalmente possiamo utilizzarlo anche all'interno di un controller con le stesse modalità viste per i filtri predefiniti.