Filtros AngularJS y filtro personalizado AngularJS con ejemplo

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

En AngularJS, un filtro formatea el valor de una expresión para su visualización sin alterar los datos subyacentes. Los filtros integrados cubren mayúsculas y minúsculas, números, moneda y JSON, mientras que un filtro personalizado gestiona cualquier regla de formato que el framework no proporcione.

  • 🧾 Principio básico: Un filtro transforma únicamente lo que muestra la vista; el valor almacenado en el objeto de ámbito nunca se modifica.
  • ➖ Sintaxis de tubería: La barra vertical separa la expresión del nombre del filtro, y los dos puntos le pasan un argumento.
  • 🔤 Filtros de casos: Las mayúsculas y minúsculas convierten una cadena para su visualización, y no existe ningún filtro de capitalización en AngularJS.
  • 🔢 Número y moneda: Los números limitan el número de decimales, mientras que las monedas anteponen un símbolo determinado por la configuración regional al valor.
  • 🛠️ Filtros personalizados: Al registrar una fábrica que devuelve una función, se crea un filtro reutilizable disponible en todo el módulo.
  • ⚡ La pureza importa: Un filtro debe devolver la misma salida para la misma entrada, porque AngularJS almacena en caché los resultados y omite volver a ejecutar los filtros puros.
Descubre más

Filtros de AngularJS y filtros personalizados

¿Qué es el filtro en AngularJS?

A Filtrar en AngularJS Ayuda a formatear el valor de una expresión para mostrarlo al usuario sin modificar el valor original. Por ejemplo, si desea que una cadena se muestre en minúsculas o mayúsculas, puede hacerlo mediante filtros. Los filtros integrados, como «minúsculas» y «mayúsculas», devuelven la cadena en el formato solicitado. Además, existen otros filtros para números, moneda y JSON.

⚠️ Nota de versión: AngularJS (la rama 1.x) llegó al final de su ciclo de vida el 31 de diciembre de 2021 y ya no recibe actualizaciones de seguridad. Todo lo que se indica a continuación sigue siendo válido para el mantenimiento de las aplicaciones AngularJS existentes; en las versiones modernas de Angular, esta misma función la cumple una tubería (pipe).

Los filtros se aplican en la vista con el carácter de barra vertical (|). Antes de analizar cada uno, conviene saber por qué querrías escribir el tuyo propio.

Filtro de minúsculas en AngularJS

Este filtro toma una cadena de texto y muestra todos sus caracteres en minúsculas.

A continuación, un controlador envía una cadena a la vista a través del objeto scope, y un filtro la convierte a minúsculas.

Filtro de minúsculas en AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>
</body>
</html>

Code Explicación

  1. La cadena mixta "Angular JS" se coloca en una variable miembro llamada tutorialName en el objeto de ámbito.
  2. El símbolo de filtro (|) marca la salida para la transformación, y el lowercase La palabra clave aplica el filtro incorporado que convierte toda la cadena a minúsculas.

⚠️ Se han aplicado correcciones a todos los anuncios. Los seis ejemplos originales compartían tres defectos. chrset="UTF 8" no es un atributo o codificación válido y ahora es charset="UTF-8". angular-route.js cargado antes angular.min.js, que genera un error de módulo y nunca se utilizó; se eliminó, al igual que la referencia a jQuery que no se usaba. El texto también indicaba que el valor era "AngularJS", mientras que el código establecía "Angular JS"; ahora el texto coincide.

Salida:

Filtro de minúsculas en AngularJS

La cadena con mayúsculas y minúsculas se muestra completamente en minúsculas. La transformación inversa funciona de la misma manera.

Filtro de mayúsculas en AngularJS

Este filtro es la contraparte del filtro de minúsculas, ya que muestra todos los caracteres en mayúsculas.

A continuación, un controlador envía una cadena a la vista a través del objeto scope, y un filtro la convierte a mayúsculas.

Filtro de mayúsculas en AngularJS

<!-- The head and library references are unchanged from the previous example -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | uppercase}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>

Code Explicación

  1. La cadena mixta "Angular JS" se coloca en tutorialName y adjunto al objeto de ámbito.
  2. El símbolo de filtro (|) va seguido del uppercase palabra clave, por lo que el filtro incorporado convierte toda la cadena a mayúsculas.

⚠️ Corrección: La introducción original presentaba esta sección como «un ejemplo de filtro de mayúsculas en AngularJS con la opción de minúsculas», lo cual es completamente erróneo. Esta sección muestra el filtro de mayúsculas, y AngularJS no tiene ningún filtro de mayúsculas; para poner en mayúscula solo la primera letra se requiere un filtro personalizado, cuya creación se explica en secciones posteriores.

Salida:

Filtro de mayúsculas en AngularJS

Los filtros de mayúsculas y minúsculas no admiten argumentos. El siguiente filtro muestra cómo dos puntos pasan un parámetro a un filtro.

Filtro numérico en AngularJS

Este filtro da formato a un número y puede limitar la cantidad de decimales que se muestran.

El siguiente ejemplo utiliza el filtro numérico para mostrar un valor con solo dos decimales. Un controlador envía el número a la vista mediante el objeto scope, y el filtro se aplica en la vista.

Filtro numérico en AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialID = 3.565656;
}]);
</script>

Code Explicación

  1. Un número con muchos decimales se coloca en una variable miembro llamada tutorialID y adjunto al objeto de ámbito.
  2. El símbolo de filtro (|) va seguido de number:2El signo de dos puntos pasa un argumento, y el 2 establece dos decimales. El valor se redondea para su visualización, por lo que 3.565656 aparece como 3.57, mientras que el ámbito conserva el número completo.

Salida:

Filtro numérico en AngularJS

Formatear un número simple a menudo no es suficiente cuando el valor representa dinero, que es lo que maneja el siguiente filtro.

ARTÍCULOS RELACIONADOS

Filtro de moneda en AngularJS

Este filtro formatea un número como un valor monetario, anteponiéndole un símbolo de moneda como el símbolo $.

En el ejemplo siguiente, un controlador envía un número a la vista a través del objeto scope, y el filtro de moneda se aplica en la vista.

Filtro de moneda en AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialprice = 20.56;
}]);
</script>

Code Explicación

  1. Se coloca un número en una variable miembro llamada tutorialprice y adjunto al objeto de ámbito.
  2. El símbolo de filtro (|) va seguido del currency filtrar.

⚠️ Corrección: El original afirmaba que la moneda “depende de la configuración de idioma aplicada a la máquina”. No es así. AngularJS utiliza la configuración regional incluida con la biblioteca, en-US por defecto, por lo que el símbolo es $ independientemente del sistema operativo. Cargar la coincidencia angular-locale_*.js archivo, o pasar el símbolo directamente: {{tutorialprice | currency:"£"}}.

Salida:

Filtro de moneda en AngularJS

Las cadenas de texto y los números son valores simples. El filtro integrado final procesa objetos completos.

Filtro JSON en AngularJS

Este filtro convierte un objeto en un objeto formateado. JSON cadena, que resulta útil para inspeccionar los datos de alcance durante el desarrollo.

En el ejemplo siguiente, un controlador envía un objeto a la vista a través del objeto scope, y el filtro JSON se aplica en la vista.

Filtro JSON en AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" };
}]);
</script>

Code Explicación

  1. Un objeto que contiene TutorialID: 12 y tutorialName: "Angular" se coloca en una variable miembro llamada tutorial y adjunto al objeto de ámbito.
  2. El símbolo de filtro (|) va seguido del json filtro, que serializa el objeto en texto JSON con sangría.

⚠️ Corrección: El original describió este valor como “un número” y como “una cadena de tipo JSON”. No es ninguna de las dos cosas. Es un JavaEl objeto Script, y el filtro JSON, es lo que lo convierte en una cadena JSON para su visualización.

Salida:

Filtro JSON en AngularJS

Estos cinco filtros cubren los casos más comunes. Si ninguno produce el resultado que necesitas, debes escribir el tuyo propio.

Filtro personalizado AngularJS

En ocasiones, los filtros integrados de AngularJS no cumplen con los requisitos de formato de salida. En tal caso, se puede crear un filtro personalizado de AngularJS que devuelva la salida del modo requerido.

Un filtro personalizado se registra en un módulo y luego se comporta exactamente igual que uno integrado. Las secciones siguientes tratan primero los filtros estándar, ya que un filtro personalizado utiliza la misma sintaxis de tubería, y luego muestran cómo crear uno.

Cómo crear un filtro personalizado en AngularJS

En el ejemplo siguiente, una cadena pasa desde el controlador a la vista a través del objeto scope, pero no debería mostrarse tal cual. Un filtro personalizado en AngularJS agrega otra cadena y muestra el resultado final.

Crear filtro personalizado en AngularJS

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>

<script>
var app = angular.module('DemoApp', []);

// The factory runs once; the function it returns runs on every value
app.filter('Demofilter', function() {
  return function(input) {
    return input + " Tutorial";
  };
});

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = "Angular";
}]);
</script>

Code Explicación

  1. La cadena “Angular” se coloca en una variable miembro llamada tutorial y adjunto al objeto de ámbito.
  2. AngularJS proporciona la filter Método de registro utilizado para crear un filtro personalizado. Se le ha dado el nombre de 'Demofilter', y ese nombre es al que hace referencia la vista.
  3. Esta es la forma estándar de un filtro personalizado: la función registrada es una personal Devuelve la función que realiza el trabajo. Esa función recibe el valor que se está filtrando como su primer parámetro y devuelve el resultado; en este caso, la entrada con "Tutorial" añadido.
  4. El filtro se aplica en la vista utilizando la misma sintaxis de tubería que cualquier filtro integrado.

👍 Tip: Los nombres de los filtros se escriben convencionalmente en minúsculas o en formato camelCase. 'Demofilter' funciona, pero un nombre como appendTutorial Se lee mejor y evita entrar en conflicto con un nombre predefinido.

Salida:

Crear filtro personalizado en AngularJS

La palabra 'Tutorial' se ha añadido a la cadena pasada en el tutorial variable. Este filtro siempre agrega el mismo texto, que se configura en la siguiente sección.

Cómo pasar argumentos a un filtro personalizado

El filtro anterior codifica de forma fija el texto que agrega, por lo que solo puede hacer una cosa. Los filtros integrados como number:2 Se acepta un argumento después de dos puntos, y un filtro personalizado también puede hacerlo: cada parámetro después del primero se asigna a un argumento separado por dos puntos en la vista.

Se requieren tres pasos: agregar parámetros después input En la función devuelta, proporcione un valor predeterminado para cualquier elemento opcional para que el filtro siga funcionando cuando se omita el argumento, luego pase los argumentos en la vista separados por dos puntos.

app.filter('appendText', function() {
  return function(input, suffix, separator) {
    if (!input) { return input; }        // guard against undefined
    separator = typeof separator === 'undefined' ? ' ' : separator;
    return input + separator + suffix;
  };
});

La vista se lee entonces de la siguiente manera, donde “Tutorial” se convierte en suffix y el guion se convierte separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Hay dos detalles que se pueden pasar por alto fácilmente. Los argumentos son expresiones de AngularJS, por lo que una cadena literal debe ir entre comillas, mientras que una palabra sin comillas se interpreta como una propiedad del ámbito. Los filtros también se encadenan, y cada uno recibe la salida del anterior: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Advertencia: Mantenga un filtro puro: misma salida para la misma entrada, sin cambios externos. AngularJS almacena en caché un filtro puro y lo vuelve a ejecutar solo cuando cambia la entrada. Un filtro que lee el reloj o modifica un servicio debe estar marcado $stateful, lo que desactiva ese almacenamiento en caché y ejecuta el filtro en cada ciclo de digestión, una causa común de páginas lentas.

Los filtros no se limitan a las plantillas. El mismo filtro puede ser llamado desde JavaGuion, como se muestra a continuación.

Cómo usar filtros en un controlador con el servicio $filter

Aplicar un filtro en la vista es el caso común, pero a veces se necesita el valor transformado dentro del controlador, por ejemplo, antes de enviar datos a un servidor. AngularJS expone todos los filtros registrados, tanto integrados como personalizados, a través de $filter servicio. Inyéctelo, llámelo con el nombre del filtro para recuperar la función de filtro, luego invóquela con el valor y cualquier argumento.

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
  $scope.tutorial = "Angular";

  // Built-in filters, called from JavaScript
  $scope.shouted = $filter('uppercase')($scope.tutorial);      // "ANGULAR"
  $scope.price   = $filter('currency')(20.56);                 // "$20.56"

  // A custom filter works exactly the same way
  $scope.full    = $filter('appendText')($scope.tutorial, "Tutorial");
}]);

También existe una forma más corta: inyectar el nombre del filtro seguido de Filter, como uppercaseFilterProporciona la función de filtro directamente y se puede llamar de inmediato. Ambas formas resuelven en la misma función, por lo que la elección es una cuestión de estilo.

Dos usos se repiten constantemente. El primero es preparar una carga útil: una fecha generalmente tiene que llegar a una API siguiendo un patrón fijo, y $filter('date')(value, 'yyyy-MM-dd') lo produce sin tocar el valor vinculado al formulario. El segundo es reducir una colección una vez en el controlador, en lugar de dejar orderBy en una ng-repetir expresión donde se vuelve a ejecutar en cada digest.

Los filtros inyectados de esta manera aún se registran en el módulo, por lo que se debe declarar un filtro personalizado con app.filter antes de que cualquier controlador pregunte $filter para ello. De lo contrario, AngularJS arroja un error de proveedor desconocido.

Llamando a un filtro en JavaEl script se diferencia de una plantilla en un aspecto importante: el resultado se calcula una sola vez y se almacena en el ámbito en lugar de recalcularse en cada digest. Esto lo convierte en la opción más rápida para un valor que rara vez cambia, y la opción incorrecta para uno que debe tracEntrada del usuario k.

Preguntas Frecuentes

No. AngularJS solo admite mayúsculas y minúsculas. Para poner en mayúscula la primera letra de cada palabra se necesita un filtro personalizado que divida la cadena y la vuelva a construir, o una regla CSS text-transform si el cambio es puramente visual.

El filtro está registrado en un módulo diferente al que se inicializa con ng-app, o bien el script que lo define se ejecuta antes de que se cargue AngularJS. Registre el filtro en el mismo módulo y cargue primero la biblioteca.

Sí. Piping una colección en el interior ng-repetir Filtra u ordena los elementos antes de que se muestren. El filtro recibe el array completo y debe devolver un array.

Sí. AI Los asistentes generan la fábrica, la función devuelta y la sintaxis de vista a partir de una descripción simple de la regla de formato. Compruebe que el filtro generado protege contra entradas indefinidas.

Las herramientas de IA reescriben la fábrica como una clase que implementa PipeTransform y mueven cada parámetro adicional al método transform. RevVea cualquier filtro con estado manualmente, porque las tuberías impuras deben declararse explícitamente.

Resumir este post con: