¿Qué es Filter en AngularJS?
Un filtro en AngularJS ayuda a formatear el valor de una expresión para mostrar al usuario sin cambiar el formato original. Por ejemplo, si desea que su cadena esté en minúsculas o mayúsculas, puede hacerlo usando filtros. Hay filtros integrados como 'minúsculas', 'mayúsculas', que pueden recuperar la salida en minúsculas y mayúsculas en consecuencia.
Del mismo modo, para los números, puede utilizar otros filtros.
Durante este tutorial, veremos los diferentes filtros estándar integrados disponibles en Angular.
En este tutorial, aprenderá:
- Filtro de minúsculas en AngularJS
- Filtro de mayúsculas en AngularJS
- Filtro de números en AngularJS
- Filtro de moneda en AngularJS
- Filtro JSON en AngularJS
Filtro de minúsculas en AngularJS
Este filtro toma una salida de cadena y formatea la cadena y muestra todos los caracteres en la cadena en minúsculas.
Veamos un ejemplo de filtros AngularJS con la opción tolowercase de AngularJS.
En el siguiente ejemplo, usaremos un controlador para enviar una cadena a una vista a través del objeto de alcance. Luego usaremos un filtro en la vista para convertir la cadena a minúsculas.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Explicación del código:
- Aquí estamos pasando una cadena, que es una combinación de caracteres en minúsculas y mayúsculas en una variable miembro llamada "tutorialName" y adjuntándola al objeto de alcance. El valor de la cadena que se pasa es "AngularJS".
- Estamos usando la variable miembro "tutorialName" y colocando un símbolo de filtro (|) lo que significa que la salida necesita ser modificada usando un filtro. Luego usamos la palabra clave en minúsculas para decir que usemos el filtro incorporado para generar la cadena completa en minúsculas.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida
- Se puede ver que se ha ejecutado la cadena "AngularJS" que se pasó en la variable tutorialName que era una combinación de caracteres en minúsculas y mayúsculas.
- Después de la ejecución, la salida final está en minúsculas como se muestra arriba.
Filtro de mayúsculas en AngularJS
Este filtro es similar al filtro de minúsculas; la diferencia es que toma una salida de cadena y formatea la cadena y muestra todos los caracteres en la cadena en mayúsculas.
Veamos un ejemplo de filtro de mayúsculas AngularJS con la opción en minúsculas.
En el siguiente ejemplo de mayúsculas de AngularJS, usaremos un controlador para enviar una cadena a una vista a través del objeto de alcance. Luego usaremos un filtro en la vista para convertir la cadena a mayúsculas.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Explicación del código:
- Aquí estamos pasando una cadena que es una combinación de caracteres en minúsculas y mayúsculas "Angular JS" en una variable miembro llamada "tutorialName" y adjuntándola al objeto de alcance.
- Estamos usando la variable miembro "tutorialName" y colocando un símbolo de filtro (|), lo que significa que la salida debe modificarse mediante el uso de un filtro. Luego usamos la palabra clave en mayúsculas para decir que usemos el filtro incorporado para generar la cadena completa en mayúsculas.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
- Se puede ver que la cadena que se pasó en la variable tutorialName, que era una combinación de caracteres en minúsculas y mayúsculas, se ha generado en mayúsculas.
Filtro de números en AngularJS
Este filtro formatea un número y puede aplicar un límite a los puntos decimales de un número.
Veamos un ejemplo de filtros AngularJS con la opción de número.
En el siguiente ejemplo,
Queríamos mostrar cómo podemos usar el filtro de números para formatear un número y mostrarlo con una restricción de 2 lugares decimales.
Usaremos un controlador para enviar un número a una vista a través del objeto de alcance. Luego usaremos un filtro en la vista para aplicar el filtro numérico.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Explicación del código:
- Aquí pasamos un número con un número mayor de posiciones decimales en una variable miembro llamada tutorialID y lo adjuntamos al objeto de alcance.
- Estamos usando la variable miembro tutorialID y poniendo un símbolo de filtro (|) junto con el filtro de número. Ahora en el número: 2, los dos indican que el filtro debe restringir el número de lugares decimales a 2.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
- Se puede ver que el número que se pasó en la variable tutorialID que tenía una gran cantidad de decimales se ha limitado a 2 lugares decimales debido al número: 2 filtros que se aplicó.
Filtro de moneda en AngularJS
Este filtro da formato a un filtro de moneda a un número.
Supongamos que, si desea mostrar un número con una moneda como $, se puede utilizar este filtro.
En el siguiente ejemplo, usaremos un controlador para enviar un número a una vista a través del objeto de alcance. Luego usaremos un filtro en la vista para aplicar el filtro actual.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Explicación del código:
- Aquí pasamos un número en una variable miembro llamada tutorialprice y lo adjuntamos al objeto de alcance.
- Estamos usando la variable miembro tutorialprice y colocando un símbolo de filtro (|) junto con el filtro de moneda. Tenga en cuenta que la moneda que se aplica depende de la configuración de idioma que se aplica a la máquina.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida
- Se puede ver que el símbolo de la moneda se ha agregado al número que se pasó en la variable tutorialprice.
- En nuestro caso, dado que la configuración del idioma es inglés (Estados Unidos), se inserta el símbolo $ como moneda.
Filtro JSON en AngularJS
Este filtro formatea una entrada tipo JSON y aplica el filtro JSON de AngularJS para dar la salida en JSON.
En el siguiente ejemplo, usaremos un controlador para enviar un objeto de tipo JSON a una vista a través del objeto de alcance. Luego usaremos un filtro en la vista para aplicar el filtro JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Explicación del código:
- Aquí pasamos un número en una variable miembro llamada "tutorial" y lo adjuntamos al objeto de alcance. Esta variable miembro contiene una cadena de tipo JSON de Tutorial ID: 12 y TutorialName: "Angular".
- Estamos usando el tutorial de variables miembro y colocando un símbolo de filtro (|) junto con el filtro JSON.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
De la salida,
- Se puede ver que el JSON como una cadena se analiza y muestra un objeto JSON adecuado en el navegador.
Resumen:
- Los filtros se utilizan para cambiar la forma en que se muestra la salida al usuario.
- Angular proporciona filtros integrados, como los filtros de minúsculas y mayúsculas, para cambiar la salida de cadenas a minúsculas y mayúsculas, respectivamente.
- También existe una disposición para cambiar la forma en que se muestran los números mediante el uso del filtro de números al especificar el número de puntos decimales que se mostrarán en el número.
- También se puede usar el filtro de moneda para agregar el símbolo de moneda a cualquier número.
- Si existe un requisito para tener una salida específica de json, angular también proporciona el filtro JSON para filtrar cualquier cadena similar a JSON en formato JSON.