Angular proporciona componentes de filtro para filtrar, organizar y ordenar los valores en base a los requisitos de entrada.
Filtro
Un filtro devuelve un subconjunto de un nuevo arreglo basado en las condiciones y expresiones del arreglo. Los filtros pueden ser usados en la plantilla HTML así como en JavaScript.
Sintaxis
1{{{expresión_filtro | filtro: expresión: comparador}}html
1$filtro("filtro")(matriz, expresión, comparador);js
En la plantilla HTML, usamos el filtro en la expresión de la tubería | como se muestra arriba. Esta función de pipe toma el resultado de la primera expresión y envía la salida a la segunda expresión.
Explicación con el ejemplo (filtro en la plantilla HTML):
1234567891011121314151617181920212223242526272829303132333435363738<!-- ng-app - attech un módulo de aplicación a la página --;<htmlng-app="myApp"--;! -- ng-controller - attech un controlador funciona a la página --;<bodyng-controller="myCtrl"><!-- ng-init para inicializar los productos como una matriz --;<divng-init="products = [{ nombre : $0027sony$0027, precio : 23, cantidad : 4}, { nombre : $0027nokia$0027, precio : 45.3, cantidad: 3}, { nombre: $0027samsung$0027, precio: 65, cantidad: 6}, { nombre: "motorola", precio: 12.7, cantidad: 8}, { nombre: $0027micromax$0027, precio: 39,75, cantidad: 3}, { nombre: "lenovo", precio: 10, cantidad: 2}]";/div...";! -- input filed to type expression to be filter --;<div--;www. lenovo.com -- Search</label--;-- inputng-model="searchText"/--;< /div... /tabla... /t... /tr... /t... /nombre... /t... /precio... /t... /cantidad... /t... /t... /tr... /t;! -- filtro basado en el valor de searchText --;|trng-repeat="p en productos | filtro:searchText"|;td²;{{{p.nombre}}</td²;||td²;{{{p. precio}}</td²;td²;{{p.cantidad}}</td²;³³³³³óntrabajo³³³óntrabajo³³³óntrabajo³³³óntrabajo³³³óntrabajo³³³óntrabajo³³³óntrabajo³³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo³³óntrabajo
html
En el ejemplo, productos es una matriz real que muestra un conjunto de valores filtrados basados en la entrada, "searchText".
Código fuente:
Plunker para el filtro en la plantilla HTML.
Explicación con el ejemplo (filtro en JavaScript):
archivo controller.js
1234567891011121314151617181920212223/// registrar myCtrl en el módulo angular app.app.controller("myCtrl",function($scope, $filter){/// crear una matriz como $scope.products $scope.products=[{ nombre: "sony", precio:23, cantidad:4},{ nombre: "nokia", precio:45. 3, quantity:3},{ nombre: "samsung", precio:65, quantity:6},{ nombre: "motorola", precio:12.7, quantity:8},{ nombre: "micromax", precio:39.75, quantity:3},{ nombre: "lenovo", precio:10, quantity:2}];// crear una copia espejo de la matriz actual $scope.mirrorProducts= angular.copy($scope.products);// vincular la función al evento ng-keyup. $scope.filterFunc=function(){/// anular el valor de mirrorProduct con el valor filtrado $scope.mirrorProducts=$filter("filter")($scope.products,{ $: $scope.searchText});};});js
index.html
12345678910111213141516171819202122<bodyng-controller="myCtrl"<div><label=;Search</label><inputng-model="searchText "ng-keyup="filterFunc()"/> Nombre</div... Tabla<tbody... tr... th... Nombre</th... w... Precio</th... w... Cantidad</th... w... /tr... w... -- utiliza la matriz mirrorProducts para mostrar los cambios porque estamos anulando la matriz mirrorProducts con la matriz de productos originales cada vez -- nombre}}</td.
html
Cuando usamos el filtrado en el controlador de Angular, tenemos que cargar la dependencia en la función del controlador como $filtro. Por lo tanto, estamos usando $filter($0027filtro$0027)(matriz, expresión, comparador).
El tipo de componente del filtro es el filtro, de ahí el código $filter($0027componente_filtro$0027), es decir, $filter($0027filtro$0027).
En el ejemplo anterior, utilizo la variable $scope.mirrorProducts y la anulo cada vez que el usuario pulsa cualquier tecla en el campo de entrada. Como sólo mostramos información filtrada al usuario, tenemos que crear un subconjunto de la matriz real y anularla cada vez para mostrar los resultados correctos en la página.
¿Y si no creo una copia en espejo de la matriz real?
- Usamos $ como expresión mientras filtramos una matriz.
- $ es una propiedad especial que puede ser usada para aplicar un filtro en cualquier propiedad del objeto.
Código fuente:
Plunker para el filtro en JavaScript