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 como 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 mas 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 mas 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 solo 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 solo las últimas 2 provincias con:

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

El filtro filter , cuyo nombre es poco afortunado, filtra el array para que el array resultante solo tenga ciertos datos del array original

Este filtro soporta varios tipos de parámetros así que vamos a verlos uno por uno.

En todos los ejemplos vamos a suponer los siguientes datos:

    $scope.valores = [{
        idProvincia: 1,
        nombre: "Palencia",
        comunidadAutonoma:"Castilla-Leon",
        idiomasCooficiales:false
    }, {
        idProvincia: 2,
        nombre: "Castellón",
        comunidadAutonoma:"Valencia",
        idiomasCooficiales:true
    }, {
        idProvincia: 3,
        nombre: "Alicante",
        comunidadAutonoma:"Valencia",
        idiomasCooficiales:true    
    }];

Vamos a ver como buscar un texto que esté en cualquiera de las propiedades de los objetos del array. Pero no hace falta que el texto y la propiedad coincidan exactamente sino solo una parte. Haciendo un símil con SQL es como si se hiciera un ” propiedad LIKE '%texto%' ”

formato:

{{ valor | filter:texto }}

Siendo texto una String con el texto a buscar en cualquier propiedad de los objetos de array.

Si aplicamos el filtro de la siguiente forma:

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

Mostrará las 3 provincias ya que el texto “encia” está en la propiedad nombre de “Palencia” y en la propiedad “comunidadAutonoma” de “Alicante” y “Castellón”.

Podemos restringir para que se busque en solo una propiedad de la siguiente forma:

formato:

{{ valor | filter:{ propiedad:texto } }}

Siendo texto una String con el texto a buscar en la propiedad llamada propiedad

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

Ahora solo busca el texto “encia” en la propiedad nombre.

Si quremos buscar en mas de una propiedad y haciendo un AND entre ellas podemos usar:

formato:

{{ valor | filter:{ propiedad1:texto1, propiedad2:texto2 } }}

<tr ng-repeat="provincia in provincias | filter:{ nombre:'encia',comunidadAutonoma:'illa'}'">
  <td>{{provincia.codProvincia}}</td>
  <td>{{provincia.nombre}}</td>
</tr>

Ahora solo buscará aquellas provincias en cuyo nombre contenga el texto “encia” y en cuya comunidad autónoma contenga el texto “illa”.

Se puede buscar un texto en todas las propiedades y además añadir otra condición con un AND usando el nombre de propiedad “$”. Es decir que la propiedad “$” es como si fuera cualquier propiedad pero además junto con otras condiciones.

Veamos un ejemplo:

idiomasCooficiales

<tr ng-repeat="provincia in provincias | filter:{ $:'encia',idiomasCooficiales:true}'">
  <td>{{provincia.codProvincia}}</td>
  <td>{{provincia.nombre}}</td>
</tr>

Ahora buscará el texto “encia” en cualquier propiedad pero además la propiedad idiomasCooficiales deberá ser true.

Vemos que es una ventana el usar ”array | filter:{$:texto}” con respecto a simplemente usar ”array | filter:texto” ya que en el primer caso

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