Filtros AngularJS y filtro personalizado AngularJS con ejemplo

Por: james hartman james hartman
Hours Actualizado

¿Qué es el filtro en AngularJS?

A Filtrar en AngularJS ayuda a formatear el valor de una expresión para mostrarla 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.

Filtro personalizado AngularJS

A veces, los filtros integrados en Angular no pueden satisfacer las necesidades o requisitos para filtrar la salida. En tal caso, se puede crear un filtro personalizado de AngularJS, que puede pasar la salida de la manera requerida.

De manera similar, para los números, puedes usar otros filtros. Durante este tutorial, veremos los diferentes filtros integrados estándar disponibles en Angular.

Cómo crear un filtro personalizado en AngularJS

En el siguiente ejemplo de filtro personalizado de AngularJS, vamos a pasar una cadena a la vista desde el controlador a través del objeto de alcance, pero no queremos que la cadena se muestre tal como está.

Queremos asegurarnos de que cada vez que mostremos la cadena, pasaremos un filtro personalizado en AngularJS, que agregará otra cadena y mostrará la cadena completa al usuario.

Crear filtro personalizado en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Explicación del código

  1. Aquí pasamos una cadena "Angular" en una variable miembro llamada tutorial y la adjuntamos al objeto de alcance.
  2. Angular proporciona el servicio de filtro que se puede utilizar para crear nuestro filtro personalizado. El 'Demofilter' es el nombre que se le da a nuestro filtro.
  3. Esta es la forma estándar en la que se definen los filtros personalizados en AngularJS en los que se devuelve una función. Esta función es la que contiene el código personalizado para crear el filtro personalizado. En nuestra función, tomamos una cadena "Angular" que se pasa desde nuestra vista al filtro y le agregamos la cadena "Tutorial".
  4. Estamos usando nuestro Demofilter en nuestra variable miembro que se pasó del controlador a la vista.

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

Salida:

Crear filtro personalizado en AngularJS

Desde la salida,

  • Se puede ver que nuestro filtro personalizado ha sido aplicado y
  • La palabra "Tutorial" se agregó al final de la cadena, que se pasó en el tutorial de variable miembro.

ARTÍCULOS RELACIONADOS

Filtro de minúsculas en AngularJS

Este filtro toma una salida de cadena, formatea la cadena y muestra todos los caracteres de la cadena en minúsculas.

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

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.

Filtro de minúsculas en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Explicación del código

  1. Aquí pasamos una cadena, que es una combinación de caracteres en minúsculas y mayúsculas en una variable miembro llamada "tutorialName" y la adjuntamos al objeto de alcance. El valor de la cadena que se pasa es "AngularJS".
  2. 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 minúsculas para indicar que se use el filtro incorporado para generar la cadena completa en minúsculas.

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

Salida:

Filtro de minúsculas en AngularJS

De la salida

  • Se puede ver que se ejecutó 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, el resultado 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, formatea la cadena y muestra todos los caracteres de la cadena en mayúsculas.

Veamos un ejemplo de filtro de mayúsculas AngularJS con la opción de minúsculas.

En el siguiente ejemplo de uso de mayúsculas en 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.

Filtro de mayúsculas en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Explicación del código

  1. Aquí pasamos una cadena que es una combinación de caracteres en minúsculas y mayúsculas "Angular JS" en una variable miembro llamada "tutorialName" y la adjuntamos al objeto de alcance.
  2. 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 indicar que se use el filtro incorporado para generar la cadena completa en mayúsculas.

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

Salida:

Filtro de mayúsculas en AngularJS

Desde 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 generó completamente en mayúsculas.

Filtro numérico en AngularJS

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 siguiente ejemplo,

Queríamos mostrar cómo podemos usar el filtro numérico para formatear un número y mostrarlo con una restricción de 2 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.

Filtro numérico en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Explicación del código

  1. Aquí pasamos un número con una mayor cantidad de decimales en una variable miembro llamada tutorialID y lo adjuntamos al objeto de alcance.
  2. Estamos usando la variable miembro tutorialID y colocando un símbolo de filtro (|) junto con el filtro numérico. Ahora en número:2, el dos indica 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 el código en el navegador.

Salida:

Filtro numérico en AngularJS

Desde la salida,

  • Se puede ver que el número que se pasó en la variable tutorialID que tenía una gran cantidad de puntos decimales se limitó a 2 decimales debido al número: 2 filtros que se aplicaron.

Filtro de moneda en AngularJS

Este filtro formatea un filtro de moneda en un número.

Supongamos que si desea mostrar un número con una moneda como $, entonces 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.

Filtro de moneda en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Explicación del código

  1. Aquí pasamos un número en una variable miembro llamada tutorialprice y lo adjuntamos al objeto de alcance.
  2. Estamos utilizando la variable miembro precio del tutorial 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á la siguiente salida cuando ejecute el código en el navegador.

Salida:

Filtro de moneda en AngularJS

De la salida

  • Se puede ver que el símbolo de moneda se ha agregado al número que se pasó en la variable precio del tutorial.
  • En nuestro caso, como la configuración de idioma es inglés (Estados Unidos), se inserta el símbolo $ como moneda.

Filtro JSON en AngularJS

Este filtro formatea un JSON como entrada 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.

Filtro JSON en AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Explicación del código

  1. 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 ID de tutorial: 12 y Nombre de tutorial: "Angular".
  2. 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á la siguiente salida cuando ejecute el código en el navegador.

Salida:

Filtro JSON en AngularJS

Desde la salida,

  • Se puede ver que el JSON, como una cadena, se analiza y se muestra como 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 filtros de minúsculas y mayúsculas, para cambiar la salida de las 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, especificando la cantidad de puntos decimales que se mostrarán en el número.
  • También se puede utilizar el filtro de moneda para agregar el símbolo de moneda a cualquier número.
  • Si es necesario tener una salida específica de JSON, angular también proporciona el filtro JSON para filtrar cualquier cadena similar a JSON en formato JSON.
  • Si hay un requisito que no cumple ninguno de los filtros definidos en angular, puede crear su filtro personalizado y agregar su código personalizado para determinar el tipo de salida que desea del filtro.

Resumir este post con: