¡Esta es una revisión vieja del documento!

−Tabla de Contenidos

5.4 filter

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

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:

1

2

3

4

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

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

1

2

3

4

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

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

1

2

3

4

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

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:

1

2

3

4

<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 debe ser true.

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.

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 o nada: Esta es la opción por defecto. Y como ya hemos dicho buscará que el texto que a buscar esté contenido en la propiedad. Es como en SQL propiedad LIKE ”%textoBuscar%”.
- Deben coincidir incluso los acentos, diéresis, etc.
true : En este caso el texto a buscar debe ser igual al valor de la propiedad. Es como en SQL propiedad = textoBuscar
función : Es una función creada por nosotros a la que se le pasan 2 valores. El primer argumento es el valor de la propiedad y el segundo argumento el texto a buscar. Si la función retorna true es que son iguales y si retorna false es que son distintos.
- Gracias a la función personalizamos como debe funcionar.

Veamos una tabla comparando las características de los 3 modos:

Característica	`false`¹⁾	`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.

Pasemos ahora a ver unos ejemplos:

Ejemplo

Referencias

/ API Reference / ng / filter / filter

¹⁾ Por defecto

unidades/05_filtros/04_filter.1407497820.txt.gz · Última modificación: 2014/08/08 13:37 por admin

Ir hasta arriba