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.

orderBy

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>

AngularJS tambien permite crear tu propia función de ordenación pero no vamos a mas sobre ella ya que la encuentro un poco compleja de usar.

filter

Filtra el array para que el array resultante solo tenga ciertos datos del array original

formato:

{{unidades: valor | filter:expresion }}

Siendo expresion una expresión que filtrará los datos del array.

Veamos ahora un ejemplo:

Supongamos los siguientes datos

    $scope.valores = [{
        idProvincia: 1,
        nombre: "Valencia"
    }, {
        idProvincia: 2,
        nombre: "Castellón"
    }, {
        idProvincia: 3,
        nombre: "Alicante"     
    }];

podemos mostrar solo aquellas provincias cuyo nombre contenga una “t” mediante la siguiente expresión:

{{unidades: valores | filter:{ nombre:'t' } }}

Ejemplo

Referencias

¹⁾ Algo que es imposible

unidades/05_filtros/03_listas.1407394263.txt.gz · Última modificación: 2014/08/07 08:51 por admin

Ir hasta arriba