AngularJS - ¿Que son los filtros? - Tipos de filtros - ¿Como funcionan los filtros en AngularJS? - ¿Como personalizar un filtro en AngularJS?

Hola aquí estamos nuevamente en el lado oscuro de java con nuestro tutorial de AngularJS, ya queda muy poco para conocerlo a fondo!, en el dia de hoy veremos filtros en AngularJS.

AngularJS - ¿Que son los filtros?

Los filtros son una herramienta proporcionada por AngularJS para ahorrarnos trabajo tedioso, su función es modificar datos de entrada mediante algunos parámetros que le pasamos y obtendremos unos datos de salida mas cómodos para presentar al usuario. Como ejemplo podemos encontrar la cantidad de decimales, la fecha ya sea con "/" o "-", texto en mayúscula o minúscula.

A continua veremos como estos filtros se utilizan en la vista, aunque también se pueden utilizar en los controladores y servicios, en los cuales los filtros son pasados por parametro.

AngularJS - Tipos de filtros

Existen dos tipos grandes de filtros en AngularJS, los provisto por defecto y los que podemos personalizar cada uno.

Los filtros por defecto son:

• lowercase: Convierte una cadena en minúscula.
• uppercase: Convierte una cadena en mayúscula.
• number: Convierte una cadena en números, tres decimales después de la coma por defecto. Si la cadena no se puede convertir a numero, retorna una cadena vacía.  Se puede agregar ":" después de la declaración para determinar la cantidad de decimales a mostrar. Ejemplo  number : 2
• date: Convierte una cadena a formato fecha de acuerdo al formato solicitado. Existen muchísimas variante por favor consultar la pagina oficial de AngularJS (clic acá!)
• filter: Selecciona unos items de un Array convirtiéndolos en un nuevo Array. Ejemplo: amigoObj in amigos| filter:textoAmigo. Donde básicamente le dice por cada item dentro de amigos es un "amigoObj" este filtralo por el campo "textoAmigo". Mas información por este tipo de filtro (clic acá!)
• currency: La da formato de moneda (ejemplo $1,234.56). Cuando no se le pasa un formato de moneda, utiliza el formato local de moneda. Tambien permite como el filtro number pasarle la cantidad de decimales. Ejemplo: sin decimales {{totalApagar| currency:"USD$"}}, con decimales {{totalApagar| currency:"USD$": 2}}
• json: Permite convertir un objeto JavaScript en un objeto Json. Permite pasar la cantidad de espacios, por defecto son 2. Ejemplo { {'nombre':'value'} | json:4 }}
• orderBy: Ordena un array por una expresión pasada. Este filtro ordena alfabéticamente para las letras y numéricamente para los números. Si los números no son correctamente ordenados verifica que estos sean guardados como números y no como strings! Permite orden inverso como parámetro adicional: Ejemplo: {{amigoObj in Amigos| orderBy:'Edad'}} ordena por la edad, si queremos podemos invertir esto como :{{amigoObj in Amigos| orderBy:'Edad': reverse=true}}
• limitTo: Crea una nueva matriz o una cadena que contiene sólo un número determinado de elementos. Los elementos se toman de ya sea al principio o al final de la matriz base, cadena o un número , tal como se especifica por el valor y el signo (positivo o negativo )de límite. Si un número se utiliza como entrada , se convierte en una cadena . Ejemplo: {{ numeros| limitTo:'3' }}

AngularJS - ¿Como funcionan los filtros en AngularJS?

En AngularJS utilizar los filtros es muy fácil, solamente agregamos el "slash" osea el | (alt+124) y luego el tipo de filtro por ejemplo el de uppercase. Siempre tenemos que recordar que lo hacemos sobre las expresiones.

Ejemplo:

{{totalApagar| currency:"USD$": 2}}
{{nombre| uppercase}}
{{nombre| lowercase}}

AngularJS - ¿Como personalizar un filtro en AngularJS?

Bueno si llegamos a estas lineas es por que nos interesa crear nuestro propio filtro esto es sumamente sencillo no vamos a darnos de  "GURU", por algo tan sencillo mas allá que en otras paginas web te lo escriban en chino.

Básicamente nosotros agregamos un filtro a un modulo así como vemos hace un tiempo acá, llamamos al modelo:

angular.module("miApp")

Y utilizamos el método "filter" pasando por atributo el nombre que elijamos para nuestro nuevo filter. Tenes que tener en cuenta que ya existen otros filtros como el uppercase, por lo cual tenemos que elegir un nombre adecuado para nuestro caso, también podemos poner nombres en camelcase y con guiones. Si o si va esto después ", function(){  return function(text) {" recién ahí luego va la acción que deseas hacer y retornar el valor, finalmente cerramos las llaves abiertas.

Ejemplo:

.filter("agregarA", function(){
                 return function(text) {
                 if(text != null){
                      return "";
                  }}});

Luego lo llamamos como cualquier expresión. 

Ejemplo:

<span> Nombre: {{my.saludar('pepe') | agregarA}}</span>

Bueno espero que allá quedado claro cualquier cosa me avisan!