Ejemplo de filtro AngularJS: Currency, JSON, Number, Minúsculas

¿Qué es Filter en AngularJS?

Un filtro da formato al valor de una expresión que se mostrará al usuario.

Por ejemplo, si desea tener sus cadenas en minúsculas o todas en mayúsculas, puede hacerlo utilizando filtros en Angular.

Hay filtros incorporados 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 usar otros filtros.

Durante este tutorial, veremos los diferentes filtros incorporados estándar disponibles en Angular.

En este tutorial, usted aprenderá –

Minúsculas

Este filtro toma una salida de cadena y da formato a la cadena y muestra todos los caracteres de la cadena como minúsculas.

Veamos un ejemplo de filtros AngularJS con la opción en minúsculas.

En el siguiente ejemplo, vamos a utilizar un controlador para enviar una cadena a una vista a través del objeto scope. A continuación, usaremos un filtro en la vista para convertir la cadena a minúsculas.

Explicación del código:

  1. 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 adjuntarla al objeto ámbito. El valor de la cadena que se pasa es “AngularJS”.
  2. Estamos utilizando la variable miembro “TutorialName” y poniendo un símbolo de filtro (|), lo que significa que la salida necesita ser modificada mediante el uso de un filtro. A continuación, usamos la palabra clave en minúsculas para decir que usar el filtro incorporado para mostrar toda la cadena en minúsculas.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida

  • Se puede ver que la cadena “AngularJS” que se pasó en la variable TutorialName que era una combinación de caracteres en minúsculas y mayúsculas se ha ejecutado.
  • Después de la ejecución, la salida final está en minúsculas como se muestra arriba.

Mayúsculas

Este filtro es similar al filtro en minúsculas; la diferencia es que toma una salida de cadena y da formato a la cadena y muestra todos los caracteres de la cadena como mayúsculas.

Veamos un ejemplo de filtros Angular JS con la opción en minúsculas.

En el siguiente ejemplo vamos a utilizar un controlador para enviar una cadena a una vista a través del objeto scope. A continuación, usaremos un filtro en la vista para convertir la cadena a mayúsculas.

Explicación del código:

  1. 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 adjuntarlo al objeto ámbito.
  2. Estamos utilizando la variable miembro “TutorialName” y poniendo un símbolo de filtro (|), lo que significa que la salida necesita ser modificada mediante el uso de un filtro. A continuación, usamos la palabra clave en mayúsculas para decir que usar el filtro incorporado para mostrar toda la cadena en mayúsculas.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

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 producido en todas las mayúsculas.

Número

Este filtro da formato a 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 numérica.

En el ejemplo que figura a continuación,

Queríamos mostrar cómo podemos usar el filtro numérico para dar formato a un número que se muestre con una restricción de 2 decimales.

Vamos a utilizar un controlador para enviar un número a una vista a través del objeto de alcance. A continuación, usaremos un filtro en la vista para aplicar el filtro numérico.

Explicación del código:

  1. Aquí estamos pasando un número con un mayor número de decimales en una variable miembro llamada tutorialID y adjuntarlo al objeto de alcance.
  2. Estamos utilizando la variable miembro tutoriaID y poniendo un símbolo de filtro (|) junto con el filtro de número. Ahora en número:2, los dos indican que el filtro debe restringir el número de decimales a 2.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Se puede ver que el número que se pasó en la variable tutorialID que tenía un gran número de decimales se ha limitado a 2 decimales debido al número: 2 filtros que se aplicó.

Moneda

Este filtro da formato a un número a un filtro de moneda.

Supongamos que, si desea mostrar un número con una moneda como $, entonces se puede utilizar este filtro.

En el siguiente ejemplo vamos a utilizar un controlador para enviar un número a una vista a través del objeto de alcance. A continuación, usaremos un filtro en la vista para aplicar el filtro actual.

Explicación del código:

    1. Aquí estamos pasando un número en una variable miembro llamada tutorialprice y adjuntarlo al objeto de alcance.
    2. Estamos utilizando la variable miembro tutorialprice y poniendo 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á la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida

  • Se puede ver el símbolo de moneda se ha añadido al número que se pasó en la variable tutorialprice.
  • En nuestro caso, dado que la configuración de idioma es Inglés (Estados Unidos), el símbolo $se inserta como moneda.

JSON

Este filtro da formato a una entrada como JSON y aplica el filtro JSON para dar la salida en JSON.

En el siguiente ejemplo vamos a utilizar un controlador para enviar un objeto de tipo JSON a una vista a través del objeto ámbito. A continuación, usaremos un filtro en la vista para aplicar el filtro JSON.

Explicación del código:

  1. Aquí estamos pasando un número en una variable miembro llamada “tutorial” y adjuntarlo al objeto de alcance. Esta variable miembro contiene una cadena de tipo JSON de ID de tutorial: 12 y TutorialName: “Angular”.
  2. Estamos utilizando el tutorial de variable miembro y poniendo un símbolo de filtro (|) junto con el filtro JSON.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

De la salida,

  • Se puede ver que el JSON como una cadena se analiza y se muestra un objeto JSON adecuado en el navegador.

Resumen:

  • Los filtros se utilizan para cambiar la forma en que la salida se muestra al usuario.
  • Angular proporciona filtros integrados como los filtros en minúsculas y mayúsculas para cambiar la salida de cadenas a minúsculas y mayúsculas respectivamente.
  • También hay una disposición para cambiar la forma en que se muestran los números mediante el filtro numérico especificando el número de puntos decimales que se mostrarán en el número.
  • También se puede utilizar el filtro de moneda para anexar el símbolo de moneda a cualquier número.
  • Si hay un requisito para tener una salida específica json, angular también proporciona el filtro JSON para filtrar cualquier cadena JSON como en formato JSON.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *