Filter 2322 Visite) AngularJs

Nel corso dei precedenti tutorial sono stati mostrati diverse direttive base: bind per leggere i dati dallo scope, model per agganciare sia in lettura che scrittura e repeat per iterare sui dati. Proprio questo è uno dei più interessanti per il numero di operazioni che è possibile fare.

In AngularJS esiste il concetto di filtro, una funzionalità che permette di applicare una trasformazione ad un dato prima di essere visualizzato.

Si possono ad esempio convertire date, trasformare delle chiavi in una url e, nel caso di liste, applicare filtri di ricerca e ordinamenti.

Per tabelle e liste rappresenta un modo per sviluppare con poche righe funzionalità altrimenti più complesse.

<form class="form-inline">

<input ng-model="query" type="text" placeholder="Filter by" autofocus>

</form>

<ul ng-repeat="person in contacts | filter:query | orderBy: 'name' ">

<li>{{person.name}} {{person.surname}} </li>

</ul>

In questo esempio abbiamo un array di oggetti persone con nome e cognome.

Come vedete tramite | (pipe) sono stati applicati due filtri, uno chiamato filter ed uno orderby. Al filtro Filter é possibile passargli una costante o, come nel nostro caso, una variabile associata ad un input.

Se una qualsiasi delle proprietà contiene il valore indicato verrà visualizzato altrimenti rimarrà nascosto.

Potete definire anche filtri su singoli campi

filter: { name: query }

O multipli 

filter: { name: query, surname: 'Rossi' } 

O passare direttamente una funzione

filter: FilterFunction

scope.filterFunction = function(element) {

return  element.age>18;

};

AngularJs ci permette di definire a nostra volta dei filtri. Completiamo la demo aggiungendo un titolo davanti ai nomi dei nostri contatti che sia Mr per gli uomini e Miss per le donne.

app.filter('title', function () {

return function (input) {

if (input == 'M')

return "Mr";

else

return "Miss";

};

});

Come vedete un filtro è una funzione che riceve in input un valore per restituirne un altro.

Per utilizzarlo come sopra

{{person.sex|title}}

Potete anche passargli ulteriori parametri aggiungendo ulteriori variabili alla funzione. In questo caso i parametri si aggiungeranno al filtro utilizzando i due punti (:)

Vi lascio al demo

• Filter.html 1 KB) Download File