AngularJS
filtri

Il tuo primo filtro

I filtri sono un tipo speciale di funzione che può modificare il modo in cui qualcosa viene stampato sulla pagina, o può essere usato per filtrare un array, o un'azione di ng-repeat . Puoi creare un filtro chiamando il metodo app.filter() , passandogli un nome e una funzione. Vedere gli esempi di seguito per dettagli sulla sintassi.

Ad esempio, creiamo un filtro che cambierà una stringa in modo che sia tutto maiuscolo (essenzialmente un wrapper della funzione javascript .toUpperCase() ):

var app = angular.module("MyApp", []);

// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
    // all the filter does is return a function,
    // which acts as the "filtering" function
    return function(rawString){
        // The filter function takes in the value,
        // which we modify in some way, then return
        // back.
        return rawString.toUpperCase();
    };
}); 

Diamo uno sguardo più da vicino a ciò che sta succedendo sopra.

Innanzitutto, stiamo creando un filtro chiamato "toUppercase", che è proprio come un controller; app.filter(...) . Quindi, la funzione di quel filtro restituisce la funzione di filtro effettiva. Quella funzione prende un singolo oggetto, che è l'oggetto da filtrare, e dovrebbe restituire la versione filtrata dell'oggetto.

Nota: in questa situazione, supponiamo che l'oggetto che viene passato al filtro sia una stringa, e quindi sappia utilizzare sempre il filtro solo sulle stringhe. Detto questo, è possibile apportare un ulteriore miglioramento al filtro che esegue il loop dell'oggetto (se si tratta di un array) e quindi rende ogni elemento una stringa maiuscola.

Ora usiamo il nostro nuovo filtro in azione. Il nostro filtro può essere utilizzato in due modi, sia in un modello angolare o come una funzione javascript (come riferimento angolare iniettato).

Javascript

Basta iniettare l'oggetto $filter angolare sul controller, quindi utilizzarlo per recuperare la funzione filtro usando il suo nome.

app.controller("MyController", function($scope, $filter){
    this.rawString = "Foo";
    this.capsString = $filter("toUppercase")(this.rawString);
});

HTML

Per una direttiva angolare, utilizzare il simbolo pipe ( | ) seguito dal nome del filtro nella direttiva dopo la stringa effettiva. Ad esempio, diciamo che abbiamo un controller chiamato MyController che ha una stringa chiamata rawString come elemento di essa.

<div ng-controller="MyController as ctrl">
    <span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>

Nota del redattore: Angular ha un numero di filtri incorporati, incluso "maiuscolo", e il filtro "toUppercase" è inteso solo come una demo per mostrare facilmente come funzionano i filtri, ma non è necessario creare la propria funzione maiuscola.

Filtro personalizzato per rimuovere i valori

Un tipico caso d'uso per un filtro è quello di rimuovere i valori da una matrice. In questo esempio passiamo in una matrice e rimuoviamo tutti i null trovati in essa, restituendo la matrice.

function removeNulls() {
    return function(list) {
        for (var i = list.length - 1; i >= 0; i--) {
            if (typeof list[i] === 'undefined' ||
                    list[i] === null) {
                list.splice(i, 1);
            }
        }
        return list;
    };
}

Quello sarebbe usato nel HTML come

{{listOfItems | removeNulls}}

o in un controller come

listOfItems = removeNullsFilter(listOfItems);

Filtro personalizzato per formattare i valori

Un altro caso d'uso per i filtri è quello di formattare un singolo valore. In questo esempio, passiamo un valore e viene restituito un valore booleano vero appropriato.

function convertToBooleanValue() {
    return function(input) {
        if (typeof input !== 'undefined' &&
                input !== null &&
                (input === true || input === 1 || input === '1' || input
                        .toString().toLowerCase() === 'true')) {
            return true;
        }
        return false;
    };
}

Quale in HTML dovrebbe essere usato in questo modo:

{{isAvailable | convertToBooleanValue}}

O in un controller come:

var available = convertToBooleanValueFilter(isAvailable);

Esecuzione del filtro in un array figlio

Questo esempio è stato fatto per dimostrare come è possibile eseguire un filtro approfondito in un array figlio senza la necessità di un filtro personalizzato.

controller:

(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl() {
    var vm = this;
  
    vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
    vm.cars = [  
       {  
          "name":"car1",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Sedans"
             }
          ]
       },
       {  
          "name":"car2",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Commercial vehicle"
             }
          ]
       },
       {  
          "name":"car3",
          "classifications":[  
             {  
                "name":"Sport car"
             },
             {  
                "name":"Sedans"
             }
          ]
       }
    ];
  }
})();

Vista:

<body ng-app="app" ng-controller="mainCtrl as main">
  Filter car by classification:
  <select ng-model="classificationName"
          ng-options="classification for classification in main.classifications"></select>
  <br>
  <ul>
    <li ng-repeat="car in main.cars |
                   filter: { classifications: { name: classificationName } } track by $index"
                  ng-bind-template="{{car.name}} - {{car.classifications | json}}">
    </li>
  </ul>
</body>

Controlla la DEMO completa.

Utilizzo dei filtri in un controller o servizio

Iniettando $filter , qualsiasi filtro definito nel modulo Angular può essere utilizzato in controller, servizi, direttive o anche altri filtri.

angular.module("app")
  .service("users", usersService)
  .controller("UsersController", UsersController);

function usersService () {
  this.getAll = function () {
    return [{
      id: 1,
      username: "john"
    }, {
      id: 2,
      username: "will"
    }, {
      id: 3,
      username: "jack"
    }];
  };
}

function UsersController ($filter, users) {
  var orderByFilter = $filter("orderBy");

  this.users = orderByFilter(users.getAll(), "username");
  // Now the users are ordered by their usernames: jack, john, will

  this.users = orderByFilter(users.getAll(), "username", true);
  // Now the users are ordered by their usernames, in reverse order: will, john, jack
}

Accedere a un elenco filtrato al di fuori di una ng-repeat

Occasionalmente vorrai accedere al risultato dei tuoi filtri al di fuori della ng-repeat , forse per indicare il numero di elementi che sono stati filtrati. Puoi farlo usando as [variablename] sintassi as [variablename] sulla ng-repeat .

<ul>
  <li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
    {{item.name}}
  </li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>