AngularJS
Filtros

Su primer filtro

Los filtros son un tipo especial de función que puede modificar la forma en que se imprime algo en la página, o se puede usar para filtrar una matriz o una acción de ng-repeat . Puede crear un filtro llamando al método app.filter() , pasándole un nombre y una función. Vea los ejemplos a continuación para detalles sobre la sintaxis.

Por ejemplo, vamos a crear un filtro que cambiará una cadena a mayúsculas (esencialmente un contenedor de la función 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();
    };
}); 

Echemos un vistazo más de cerca a lo que está pasando arriba.

Primero, estamos creando un filtro llamado "toUppercase", que es como un controlador; app.filter(...) . Entonces, la función de ese filtro devuelve la función de filtro real. Esa función toma un solo objeto, que es el objeto que se filtra, y debe devolver la versión filtrada del objeto.

Nota: En esta situación, asumimos que el objeto que se pasa al filtro es una cadena y, por lo tanto, sabemos que siempre se debe usar el filtro solo en las cadenas. Dicho esto, se podría realizar una mejora adicional en el filtro que recorre el objeto (si es una matriz) y luego hace que cada elemento sea una cadena en mayúscula.

Ahora vamos a usar nuestro nuevo filtro en acción. Nuestro filtro se puede utilizar de dos maneras, ya sea en una plantilla angular o como una función javascript (como referencia angular inyectada).

Javascript

Simplemente inyecte el objeto $filter angular en su controlador, luego úselo para recuperar la función de filtro usando su nombre.

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

HTML

Para una directiva angular, use el símbolo de la tubería ( | ) seguido del nombre del filtro en la directiva después de la cadena real. Por ejemplo, digamos que tenemos un controlador llamado MyController que tiene una cadena llamada rawString como un elemento de ella.

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

Nota del editor: Angular tiene una serie de filtros incorporados, que incluyen "mayúsculas", y el filtro "a mayúsculas" está pensado solo como una demostración para mostrar fácilmente cómo funcionan los filtros, pero no necesita crear su propia función de mayúsculas.

Filtro personalizado para eliminar valores.

Un caso de uso típico de un filtro es eliminar valores de una matriz. En este ejemplo, pasamos una matriz y eliminamos cualquier nulo que se encuentre en ella, devolviendo la matriz.

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;
    };
}

Eso sería usado en el HTML como

{{listOfItems | removeNulls}}

o en un controlador como

listOfItems = removeNullsFilter(listOfItems);

Filtro personalizado para dar formato a los valores.

Otro caso de uso para los filtros es dar formato a un solo valor. En este ejemplo, pasamos un valor y se nos devuelve un valor booleano verdadero apropiado.

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;
    };
}

Que en el HTML sería usado así:

{{isAvailable | convertToBooleanValue}}

O en un controlador como:

var available = convertToBooleanValueFilter(isAvailable);

Realizando filtro en una matriz hijo

Este ejemplo se realizó para demostrar cómo puede realizar un filtro profundo en una matriz secundaria sin la necesidad de un filtro personalizado.

Controlador:

(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"
             }
          ]
       }
    ];
  }
})();

Ver:

<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>

Compruebe la DEMO completa.

Usando filtros en un controlador o servicio

Al inyectar $filter , cualquier filtro definido en su módulo Angular puede usarse en controladores, servicios, directivas o incluso en otros filtros.

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
}

Accediendo a una lista filtrada desde fuera de una repetición ng

Ocasionalmente, querrá acceder al resultado de sus filtros desde fuera de la ng-repeat , tal vez para indicar el número de elementos que se han filtrado. Puede hacer esto usando as [variablename] sintaxis as [variablename] en la 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>