Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprender AngularJS Fácil: Filtros

Jesús Lucas
  • Escrito por Jesús Lucas el 08 de Julio de 2014
  • <1 min de lectura | Frameworks
Aprender AngularJS Fácil: Filtros

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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Razones para aprender AngularJS

Razones para aprender AngularJS

Frameworks

10 de Marzo de 2015

En OpenWebinars.net tenemos un Curso Online con Clases en Directo de AngularJS y Typescript, donde aprenderás como un frontend profesional a desarrollar tus aplicaciones web con JavaScript.

AngularJS: El DOM HTML

AngularJS: El DOM HTML

Frameworks

21 de Julio de 2014

AngularJS tiene sus propios atributos en HTML que actúan como directivas. A continuación veremos algunas directivas que manejan objetos del DOM HTML.

Curso de AngularJS profesional

Curso de AngularJS profesional

curso

Con este curso aprenderás:

  • Aprenderás las ventajas de AngularJS.
  • Construye una aplicación frontend MVC.
  • Test unitarios.

Duración: 1 hora y 46 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars