5.3 Listas

Estos filtros se aplican para modificar la forma en la que se muestran arrays de datos.

• orderBy: Permite ordenar un array
• limitTo: Limita el número de elementos de un array
• filter: Filtra los datos del array.

Lo normal es usar estos filtros dentro de la directiva ng-repeat para modificar la manera en que se muestran los elementos de una tabla.

Permite ordenar un array de datos.El resultado será el mismo array pero ordenado.

formato:

{{array | orderBy:'propiedad' }}

Siendo propiedad el nombre de la propiedad del objeto de cada elemento del array por la que queremos ordenar. Si queremos ordenar por más de una columna pondremos un array de Strings

{{array | orderBy:['propiedad1','propiedad2',...,'propiedadn'] }}

Veamos ahora un ejemplo:

Supongamos los siguientes datos

    $scope.provincias = [{
      codProvincia: "02",
      nombre: "Albacete"
    }, {
      codProvincia: "03",
      nombre: "Alicante/Alacant"
    }, {
      codProvincia: "04",
      nombre: "Almería"   
    }];

podemos mostrar las provincias en una tabla ordenadas por la columna nombre con la siguiente expresión:

      <tr ng-repeat="provincia in provincias | orderBy:'nombre'">
        <td>{{provincia.codProvincia}}</td>
        <td>{{provincia.nombre}}</td>
      </tr>

Si quisiéramos ordenar por nombre y en caso de que dos se llamaran igual ¹⁾ por codProvincia usaríamos un array con los 2 Strings:

      <tr ng-repeat="provincia in provincias | orderBy:['nombre','codProvincia']">
        <td>{{provincia.codProvincia}}</td>
        <td>{{provincia.nombre}}</td>
      </tr>

Si queremos ordenar en vez de forma ascendente de forma descendente no tenemos más que incluir el signo ”-” menos delante del nombre de la columna:

      <tr ng-repeat="provincia in provincias | orderBy:'-nombre'">
        <td>{{provincia.codProvincia}}</td>
        <td>{{provincia.nombre}}</td>
      </tr>

Este filtro permite limitar el nº de elementos que se muestran del array.

formato:

{{array | limitTo:numero }}

Siendo numero el nº de elementos que queremos mostrar del array.

Veamos ahora un ejemplo:

Supongamos los siguientes datos

    $scope.provincias = [{
      codProvincia: "02",
      nombre: "Albacete"
    }, {
      codProvincia: "03",
      nombre: "Alicante/Alacant"
    }, {
      codProvincia: "04",
      nombre: "Almería"   
    }];

podemos mostrar sólo las 2 primeras provincias con:

      <tr ng-repeat="provincia in provincias | limitTo:2">
        <td>{{provincia.codProvincia}}</td>
        <td>{{provincia.nombre}}</td>
      </tr>

Si el valor es negativo lo que muestra es los 'n' últimos elementos del array en vez de los 'n' primeros.

Podemos mostrar sólo las 2 últimas provincias con:

      <tr ng-repeat="provincia in provincias | limitTo:-2">
        <td>{{provincia.codProvincia}}</td>
        <td>{{provincia.nombre}}</td>
      </tr>

Ya que el filtro filter dispone de tantas opciones, le hemos dedicado el siguiente tema completo a él.

• / API Reference / ng / filter / orderBy
• / API Reference / ng / filter / limiTo