Los filtros se pueden agregar a las expresiones y a las directivas mediante un carácter de barra vertical | . Los filtros de AngularJS se usan para transformar datos.

Filtro Descripción
currency Da formato de moneda a un número.
filter Selecciona un subconjunto de elementos de un array.
lowercase Da formato a una cadena convirtiéndola en minúsculas.
orderBy Ordena un array según una expresión
uppercase Da formato a una cadena convirtiéndola en mayúsculas.

Añadir Filtros a Expresiones

Un filtro se puede añadir a una expresión con un carácter de barra vertical | y un filtro. (Durante los siguientes dos ejemplos vamos a utilizar el controlador Persona del capítulo anterior ) El filtro uppercase convierte una cadena en mayúsculas: Ejemplo:
<div ng-app="" ng-controller="personaController">

<p>El nombre es {{ persona.nombre | uppercase }}</p>

</div>
El filtro lowercase convierte una cadena de texto a minúsculas: Ejemplo:
<div a="" class=" ng-app=" currency="" da="" de="" el="" es="" filtro="" formato="" lowercase="" moneda="" n="" ng-controller="personaController" nombre="" persona.nombre="" prettyprint="" un=""><div ng-app="" ng-controller="facturaController">

<input type="number" ng-model="cantidad">
<input type="number" ng-model="precio">

<p>Total = {{ (cantidad * precio) | currency }}</p>

</div>

Añadiendo Filtros a Directivas

Un filtro se puede añadir a una directiva con un carácter de barra vertical | y un filtro. El filtro orderBy/ ordena un array según una expresión dada: Ejemplo:
<div ng-app="" ng-controller="alumnosController">

<ul>
  <li ng-repeat="alumno in alumnos | orderBy:'pais'">
    {{ alumno.nombre + ', ' + alumno.pais }}
  </li>
</ul>

<div>
</div></div>

Filtrando la entrada de datos

Un filtro de entrada se puede añadir a una directiva con un carácter de barra vertical | y el filtro seguido de dos puntos y el nombre del modelo. El filtro selecciona un subconjunto de un array: Ejemplo:
<div ng-app="" ng-controller="alumnosController">

<p><input type="text" ng-model="nombre"></p>

<ul>
  <li ng-repeat="alumno in alumnos | filter:nombre | orderBy:'pais'">
    {{ (alumno.nombre | uppercase) + ', ' + alumno.pais }}
  </li>
</ul>

</div>

Hasta aquí llega este artículo sobre los filtros en AngularJS . No olvídes suscribirte para recibir las últimas novedades y contenidos exclusivos en tu correo electrónico. Imagen por: https://www.flickr.com/photos/daolitea/6816175018/sizes/c/in/photostream/

Ver Indice Tutorial