Netrunning: AngularJS (04) Filtros

martes, 26 de agosto de 2014

AngularJS (04) Filtros

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:

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