Los filtros sirven para procesar las información antes de que esta aparezca en pantalla, generalmente para darles algún tipo de formato o para seleccionar los elementos de un array.
Para poder utilizar los filtros tan solo hay que utilizar en carácter especial | también llamado pipe o tubería, de la siguiente forma:
Como podemos ver, la expresión se amplia con la tuberia y el filtro que queremos aplicar...
Existen diferentes tipos de filtros, como podemos ver en la siguiente lista:
Sencillo ¿verdad?
Vemos como en la directiva de repetición entra el filtro ordenando por el nombre provincia y como AngularJS recorre todo el array ordenando los elementos de esta forma.
Nota: He querido poner los script aun dentro del código para que podáis ir siguiéndolos, aunque lo correcto ya sería tenerlos en un archivo aparte.
Nota2: os invito a que curioseéis un poco con esto, de hecho se puede ver que tiene una gran potencia para trabajar e incluso de sustituir algunas funcionalidades de AJAX...
Para poder utilizar los filtros tan solo hay que utilizar en carácter especial | también llamado pipe o tubería, de la siguiente forma:
<p>El nombre es: {{ persona.nombre | uppercase }}</p>
Como podemos ver, la expresión se amplia con la tuberia y el filtro que queremos aplicar...
Existen diferentes tipos de filtros, como podemos ver en la siguiente lista:
- currency: que da formato a un numero a formato moneda
- filter: que selecciona un subconjunto del array
- lowercase: que convierte la cadena en minúsculas
- orderBy: ordena el array por una expresión
- uppercase: que convierte una cadena en mayúsculas
Añadiendo filtros a un expresión
Vamos a añadair un filtro a uno de los ejemplos que ya vamos conociendo para ver su resultado:<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
<p>¿Nombre? <input type="text" ng-model="persona.nombre"></p>
<p>¿Apellido? <input type="text" ng-model="persona.apellido"></p>
<p>El nombre es: {{ persona.nombre | uppercase }}</p>
<p>El apellido es: {{ persona.apellido | lowercase }}</p>
</div>
<script>
function personController($scope) {
$scope.persona = {
nombre: "Miguel",
apellido: "Ramirez"
};
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
En el ejemplo ya podemos ver mezcladas varias cosas de las que hemos visto hasta el momento, ya que recoge las variables con ng-model, llamando al objeto y a la propiedad (persona.nombre), utiliza un controlador para crear el objeto y finalmente muestra el resultado con una expresión y un filtro que convierte al nombre en mayúsculas y al apellido en minúscula.Currency
Este filtro convierte los números en moneda, aunque por defecto lo hace en dolares ($), se puede convertir en euros (€) de forma muy sencilla, como vemos en el filtro del siguiente ejemplo:<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="costController">
Cantidad: <input type="number" ng-model="cantidad">
Precio: <input type="number" ng-model="precio">
<p>Total = {{ (cantidad * precio) | currency:"€" }}</p>
</div>
<script>
function costController($scope) {
$scope.cantidad = 1;
$scope.precio = 9.99;
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Sencillo ¿verdad?
Añadiendo filtros a las directivas
Ahora vamos a poner un filtro a una directiva que ordena un array, veras que sencillo es:<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="namesController">
<p>Bucle de objetos:</p>
<ul>
<li ng-repeat="x in nombres | orderBy:'provincia'">
{{ x.nombre + ', ' + x.provincia }}
</li>
</ul>
</div>
<script>function namesController($scope) {
$scope.nombres = [
{nombre:'Maria',provincia:'Córdoba'},
{nombre:'Jose',provincia:'Barcelona'},
{nombre:'Antonio',provincia:'Madrid'},
{nombre:'Ana',provincia:'Huelva'},
{nombre:'Juan',provincia:'Jaen'},
{nombre:'Raquel',provincia:'Orense'}
];
} </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Vemos como en la directiva de repetición entra el filtro ordenando por el nombre provincia y como AngularJS recorre todo el array ordenando los elementos de esta forma.
Filtrando por inputs
Una herramienta muy potente es el filtrado por inputs, como veras en el siguiente script:<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="namesController">
<p>Input con filtro:</p>
<p><input type="text" ng-model="nombre"></p>
<ul>
<li ng-repeat="x in nombres | filter:nombre | orderBy:'provincia'">
{{ (x.nombre | uppercase) + ', ' + x.provincia }}
</li>
</ul>
</div>
<script>function namesController($scope) {
$scope.nombres = [
{nombre:'Maria',provincia:'Córdoba'},
{nombre:'Jose',provincia:'Barcelona'},
{nombre:'Antonio',provincia:'Madrid'},
{nombre:'Ana',provincia:'Huelva'},
{nombre:'Juan',provincia:'Jaen'},
{nombre:'Raquel',provincia:'Orense'}
];
}</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
En la directiva ng-repeat hemos introducido dos filtros, uno que filtra por nombre y el otro que ordena por provincia, de ese modo cuando en el input introducimos letras, estas se buscan en la cadena que genera la directiva de repetición y se muestran los resultados positivos ordenados por provincia.Nota: He querido poner los script aun dentro del código para que podáis ir siguiéndolos, aunque lo correcto ya sería tenerlos en un archivo aparte.
Nota2: os invito a que curioseéis un poco con esto, de hecho se puede ver que tiene una gran potencia para trabajar e incluso de sustituir algunas funcionalidades de AJAX...
No hay comentarios:
Publicar un comentario