Material‎ > ‎Software‎ > ‎Angular JS‎ > ‎

AngularJS - Filtros (o Transformers)

Objetivo

Los filtros permiten definir formatos para presentar información en las vistas y templates. 
En Arena tenemos al Transformer como concepto equivalente.

Ejemplos de filtros pueden ser
  • mostrar la hora con formato dd/MM/yyyy, yyyy/MM/dd, dd.mm.yyyy, etc.
  • mostrar los números con 3, 4 ó 5 decimales

Además también sirven para hacer transformaciones a un conjunto de datos
  • como ordenar la lista por algún criterio en particular
  • o filtrar aquellos que cumplan alguna condición

Filtros (de colecciones)

Un problema muy común con el que nos encontramos es filtrar los resultados.
Para resolver este problema Angular nos brinda un componente filter ya implementado que puede ser aplicado a las variables de un scope, veámoslo con un ejemplo:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
      Buscar: <input ng-model="phoneCtrl.query">
    </div>
    <div class="span10">
      <!--Body content-->
      <ul class="phones">
        <li ng-repeat="phone in phoneCtrl.phones | filter: phoneCtrl.query">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>
    </div>
  </div>
 </div>

Order-by

Si además queremos aplicar un orden por alguna propiedad:

 Ordenar:
 <select ng-model="phoneCtrl.orderProp">
   <option value="name">Alfabéticamente</option>
   <option value="age">Más nuevo primero</option>
 </select>
 
 <ul class="phones">
   <li ng-repeat="phone in phoneCtrl.phones | orderBy: phoneCtrl.orderProp">
     {{phone.name}}
     <p>{{phone.snippet}}</p>
   </li>
 </ul>

Filtros (para formato, tipo Transformers)

Ademas de filtrar resultados, Angular denomina filtro a lo que nosotros llamamos transformer en Arena. Un ejemplo (en vez de true-false vemos el check o la cruz):

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

Ahora que creamos nuestro filtro que se llama checkmark, se lo asociamos a nuestro módulo para que lo vea:

...
angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters'])
...

Para aplicarlo en alguna propiedad de nuestro modelo lo concatenamos como el filtro anterior:

{{ expression | filter }}

Ejemplo:

...
<dl>
   <dt>Infrared</dt>
   <dd>{{phone.connectivity.infrared | checkmark}}</dd>
   <dt>GPS</dt>
   <dd>{{phone.connectivity.gps | checkmark}}</dd>
</dl>
...

Links relacionados

Comments