5.4 Filter [Curso de AngularJS y REST]

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 5.4 filter ======
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:
<sxh js>
    $scope.provincias = [{
        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    
    }];
</sxh>
===== Búsqueda en todas las propiedades =====
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%' '' " y usando todas las propiedades de cada objeto del array.

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

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

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

===== Búsqueda en una propiedad =====

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

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

Ahora solo busca el texto "encia" en la propiedad ''nombre''.

===== Búsqueda en varias propiedades =====
Si quremos buscar en mas de una propiedad y haciendo un **AND** entre ellas podemos usar:

**formato:**

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



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

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

===== Búsqueda combinada =====
Usando el nombre de propiedad "$" se puede buscar un texto en todas las propiedades pero además añadir otra condición con un **AND** como acabamos de hacer. Es decir que la propiedad "$" es como si fuera el nombre de cualquier propiedad.

Veamos un ejemplo:

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

Ahora buscará el texto "encia" en cualquier propiedad pero además la propiedad ''idiomasCooficiales'' debe ser ''true''.

<note tip>
Vemos que es una ventaja usar 
  array | filter:{$:texto}
con respecto a simplemente usar 
  array | filter:texto
ya que en el primer caso podemos añadir condiciones **AND** con el formato 
  array | filter:{$:texto,propiedad:valor}
mientras que en el segundo caso no se puede.
</note>

===== Comparador =====
Hemos visto que el filtro ''filter'' busca que lo que buscamos esté contenido dentro de la propiedad en la que buscamos, pero ¿Y si queremos que solo lo encuentre si es la palabra entera? ¿Y si queremos que encuentre una palabra con acentos aunque no lo hayamos escrito?

Para ayudarnos en todo ésto,  el filtro ''filter'' dispone de un segundo parámetro que permite indicar como se hace la comparación entre los textos, veamos los 3 posibles valores.

==== false ====
Poner ''false'' es la funcionalidad por defecto, por lo tanto es lo mismo que no poner nada.
Y como ya hemos dicho buscará que el texto que a buscar esté contenido en la propiedad. Es como en SQL ''propiedad LIKE "%textoBuscar%"''. 


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

Busca en la propiedad "nombre" si **contiene** la palabra "encia".


==== true ====
Si se pone el valor ''true'' ,En este caso el texto a buscar debe ser igual al valor de la propiedad.  Es como en SQL ''propiedad = textoBuscar'' 

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

Busca en la propiedad "nombre" si su valor es **exactamente** la palabra "encia".

==== funcion ====
En este caso no ponemos un valor booleano como ''true'' o ''false'' sino el nombre de una función creada por nosotros en el ''$scope'' y a la que se le pasarán 2 argumentos. El primer argumento es el valor de la propiedad y el segundo argumento es el texto a buscar. Si la función retorna ''true'' es que son iguales y si retorna ''false'' es que son distintos.

En nuestro ejemplo vamos a suponer que tenemos la siguiente función en el ''$scope''
<sxh js>
    $scope.comparator = function(actual, expected) {
        if (actual.indexOf(expected)===0) {
          return true;
        } else {
          return false;
        }
    }; 
</sxh>
Esta función retorna ''true'' si el valor de ''actual'' comienza por el valor de ''expected''


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

Busca en la propiedad "nombre" si su valor **comienza** con la palabra "encia".Para hacerlo lo que hace es llamar a la función ''comparator'' que como ya hemos explicado solo retorna ''true'' si el valor comienza por la palabra buscada.

Veamos una tabla comparando más características de los 3 modos:

^  Característica  ^  ''false''((Por defecto))  ^  ''true''  ^  Función JavaScript  ^
| El texto a buscar es "" | Se retornan todas las filas | No se retorna ninguna fila | Personalizado según lo que haga la función |
| Sensible a mayúsculas | Se encuentra independientemente de las mayúsculas / minúsculas | Deben coincidir las mayúsculas / minúsculas | Personalizado según lo que haga la función |
| Sensible a acentos, diéresis, etc. | Deben coincidir los acentos, diéresis, etc. | Deben coincidir los acentos, diéresis, etc. | Personalizado según lo que haga la función |

Como vemos el usar una función nos permite personalizar todo lo que queramos como comparar los datos, aunque realmente no permite cambiar la consulta de búsqueda sino solo la forma de comparar los 2 datos.

===== Búsqueda personalizada =====
Hasta ahora hemos visto como hacer filtros mirando en varias propiedades pero siempre era haciendo un **AND** entre ellas. AngularJS permite que le pasemos una función para que decidamos por nosotros mismos como filtrar los datos permitiendo hacer filtros todo lo complejo que queramos. En ese caso al filtro ''filter'' solo se le pasa un único parámetro con el nombre de una función creada por nosotros en el ''$scope'' . Dicha función acepta un único parámetro con un elemento de array y deberemos retornar ''true'' en caso de que queramos que ese elemento se muestre y ''false'' si no queremos que se muestre. 

Veamos un ejemplo, supongamos que en el ''$scope'' tenemos la siguiente función:

<sxh js>
    $scope.consultaPersonalizada=function(value) {
      if ((value.idiomasCooficiales===true) || (value.idProvincia>2)) {
        return true;
      } else {
        return false;
      }
    }
</sxh>

Es una función a la que le pasaremos un valor del array y nos retorna ''true'' si ''value.idiomasCooficiales===true'' **OR** ''value.idProvincia>2''. Observa como hemos usado el operador ''OR'' que hasta ahora no habíamos podido usarlo.

Ahora podemos simplemente usar esa función en el filtro ''filter''.


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

En ese caso solo se mostrarán aquellas provincias que tengan un idioma cooficial y cuyo ''idProvincia'' sea mayor que 2

<note>
En caso de usar la función personalizada de filtro ya no se puede pasar un segundo argumento con la función de ''comparator'' ya que no tiene sentido ya que la función personalizada de filtro se encarga de hacer todo el trabajo.
</note>

===== Ejemplo =====

{{url>http://embed.plnkr.co/N0cf8b}}
===== Referencias =====
  * [[https://docs.angularjs.org/api/ng/filter/filter|/ API Reference / ng / filter / filter]]
unidades/05_filtros/04_filter.1407513044.txt.gz · Última modificación: 2014/08/08 17:50 por admin
Ir hasta arriba