Desarrollo de Aplicaciones Web con AngularJS – Filtros

Ejemplo en Vivo: https://angularjsfiltros.herokuapp.com/#/

El uso de filtros en AngularJS nos permite añadir formato o manipular los datos segun algunas necesidades especificas, y segun la vista deseada en el formato deseado.

Desarrollo de Aplicaciones Web con AngularJSFiltros

Los filtros puede ser añadidos a expresiones y directivas usando la barra vertical, nuestro principal elemento para que los filtros funcionen es el uso de la barra vertical.

Filtros de AngularJS

Filtros de AngularJS pueden ser usados para transformar datos, esto nos ayuda a mostrar los datos como deseamos sin mucho esfuerzo, simplificando la forma de generar Vista de datos en un formato deseado.

         Filtro            Descripcion

  • currency     Formatea un numero a formato moneda.
  • filter           Selecciona un subconjunto de elementos de un arreglo.
  • lowercase  Formatea una cadena a letra minuscula.
  • orderBy     Ordena un arreglo en funcion de una expresion.
  • uppercase  Formatea una cadena a letra mayuscula.

Añadiendo filtros a Expresiones

Un filtro puede ser añadido a una expresion con una barra vertical (|) y un filtro.
{{ apellidos | uppercase }}

El filtro moneda

El filtro moneda formatea como moneda:
{{ (cantidad * precio) | currency }}

Añadiendo filtros a directivas

Un filtro puede ser añadido a una directiva con una barra horizontal (|) y un filtro.

x in nombres | orderBy:’pais’

Filtro de entrada

Un filtro de entrada puede ser añadido a una directiva con una barra vertical (|) y un filtro seguido de una nombre del modelo entre comillas simples.

x in nombres | filter:test | orderBy:’pais’

 

Escrito por Christian Portilla Pauca

Video Explicativo

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s