Filtres AngularJS et filtre personnalisé AngularJS avec exemple

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

Dans AngularJS, un filtre met en forme la valeur d'une expression pour l'affichage sans altérer les données sous-jacentes. Les filtres intégrés gèrent la casse, les nombres, les devises et le JSON, tandis qu'un filtre personnalisé prend en charge toute règle de mise en forme non fournie par le framework.

  • 🧾 Principe de base : Un filtre transforme uniquement ce qui est affiché dans la vue ; la valeur contenue dans l’objet scope n’est jamais modifiée.
  • ➖ Syntaxe des pipes : La barre verticale sépare l'expression du nom du filtre, et les deux-points lui transmettent un argument.
  • 🔤 Filtres de cas : Les fonctions lowercase et uppercase permettent de convertir une chaîne de caractères pour l'affichage, et il n'existe pas de filtre de mise en majuscules dans AngularJS.
  • (I.e. Nombre et devise : Les nombres sont limités au nombre de décimales, tandis que les devises ajoutent un symbole régional à la valeur.
  • ️ Filtres personnalisés : L'enregistrement d'une fabrique qui renvoie une fonction crée un filtre réutilisable disponible dans tout le module.
  • | La pureté compte : Un filtre doit renvoyer la même sortie pour une même entrée, car AngularJS met les résultats en cache et évite de réexécuter les filtres purs.
En savoir plus

Filtres AngularJS et filtres personnalisés

Qu’est-ce que le filtre dans AngularJS ?

A Filtrer dans AngularJS Permet de formater la valeur d'une expression pour l'affichage à l'utilisateur sans modifier sa valeur d'origine. Par exemple, si vous souhaitez afficher une chaîne de caractères en minuscules ou en majuscules, vous pouvez utiliser des filtres. Les filtres intégrés tels que « minuscules » et « majuscules » renvoient la chaîne dans la casse souhaitée ; d'autres filtres existent pour les nombres, les devises et le format JSON.

⚠️ Note de version : AngularJS (branche 1.x) a atteint sa fin de vie le 31 décembre 2021 et ne bénéficie plus de correctifs de sécurité. Les informations ci-dessous restent valables pour la maintenance des applications AngularJS existantes ; dans les versions modernes d’Angular, ce rôle est assuré par un pipe.

Les filtres sont appliqués dans la vue à l'aide du caractère pipe. Avant d'examiner chaque filtre, il est utile de comprendre pourquoi vous en créeriez un vous-même.

Filtre minuscule dans AngularJS

Ce filtre prend une chaîne de caractères et affiche tous ses caractères en minuscules.

Ci-dessous, un contrôleur envoie une chaîne de caractères à la vue via l'objet scope, et un filtre la convertit en minuscules.

Filtre minuscule dans 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 Explication

  1. La chaîne de caractères mixte « Angular JS » est placée dans une variable membre appelée tutorialName sur l'objet de portée.
  2. Le symbole de filtre (|) marque la sortie à transformer, et le lowercase Le mot-clé applique le filtre intégré qui convertit toute la chaîne en minuscules.

⚠️ Des corrections ont été apportées à chaque annonce. Les six exemplaires originaux présentaient tous trois défauts communs. chrset="UTF 8" n'est pas un attribut ou un encodage valide, et est maintenant charset="UTF-8". angular-route.js chargé avant angular.min.jsCette ligne, qui générait une erreur de module et n'a jamais été utilisée, a été supprimée, de même que la référence jQuery inutilisée. Le texte indiquait également que la valeur était « AngularJS », alors que le code définissait « Angular JS » ; le texte est désormais cohérent.

Sortie :

Filtre minuscule dans AngularJS

La chaîne de caractères contenant des majuscules et des minuscules est affichée entièrement en minuscules. La transformation inverse fonctionne de la même manière.

Filtre majuscule dans AngularJS

Ce filtre est l'équivalent du filtre en minuscules, affichant chaque caractère en majuscules.

Ci-dessous, un contrôleur envoie une chaîne de caractères à la vue via l'objet scope, et un filtre la convertit en majuscules.

Filtre majuscule dans 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 Explication

  1. La chaîne de caractères mixte « Angular JS » est placée dans tutorialName et attaché à l'objet de portée.
  2. Le symbole de filtre (|) est suivi du uppercase Le mot-clé est donc utilisé par le filtre intégré pour afficher toute la chaîne en majuscules.

⚠️ Correction: La version originale de cette section la présentait comme « un exemple de filtre de mise en majuscules AngularJS avec l'option minuscules », ce qui est doublement erroné. Cette section illustre le filtre de mise en majuscules, et AngularJS ne possède aucun filtre de mise en majuscules ; la mise en majuscule de la première lettre uniquement nécessite un filtre personnalisé, dont la création est expliquée dans les sections suivantes.

Sortie :

Filtre majuscule dans AngularJS

Les filtres de casse ne prennent aucun argument. Le filtre suivant montre comment le deux-points transmet un paramètre à un filtre.

Filtre numérique dans AngularJS

Ce filtre permet de formater un nombre et de limiter le nombre de décimales affichées.

L'exemple ci-dessous utilise le filtre numérique pour afficher une valeur avec deux décimales. Un contrôleur envoie le nombre à la vue via l'objet scope, et le filtre est appliqué dans la vue.

Filtre numérique dans 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 Explication

  1. Un nombre comportant de nombreuses décimales est placé dans une variable membre appelée tutorialID et attaché à l'objet de portée.
  2. Le symbole de filtre (|) est suivi de number:2Le deux-points permet de passer un argument, et le 2 ajoute deux décimales. La valeur est arrondie pour l'affichage ; ainsi, 3.565656 apparaît comme 3.57, tandis que la portée conserve la valeur entière.

Sortie :

Filtre numérique dans AngularJS

La mise en forme d'un simple nombre ne suffit souvent pas lorsque sa valeur représente de l'argent, ce que gère le filtre suivant.

ARTICLES LIÉS

Filtre de devises dans AngularJS

Ce filtre formate un nombre comme une valeur monétaire, en le faisant précéder d'un symbole monétaire tel que $.

Dans l'exemple ci-dessous, un contrôleur envoie un nombre à la vue via l'objet scope, et le filtre de devise est appliqué dans la vue.

Filtre de devises dans 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 Explication

  1. Un nombre est placé dans une variable membre appelée tutorialprice et attaché à l'objet de portée.
  2. Le symbole de filtre (|) est suivi du currency filtre.

⚠️ Correction: Le texte original affirmait que la devise « dépend des paramètres linguistiques appliqués à la machine ». Ce n'est pas le cas. AngularJS utilise les paramètres régionaux fournis avec la bibliothèque, en-US par défaut ; le symbole est donc $ quel que soit le système d'exploitation. Chargez le fichier correspondant. angular-locale_*.js fichier, ou transmettez directement le symbole : {{tutorialprice | currency:"£"}}.

Sortie :

Filtre de devises dans AngularJS

Les chaînes de caractères et les nombres sont des valeurs simples. Le dernier filtre intégré traite les objets entiers.

Filtre JSON dans AngularJS

Ce filtre convertit un objet en un formaté JSON chaîne de caractères, utile pour inspecter les données de portée pendant le développement.

Dans l'exemple ci-dessous, un contrôleur envoie un objet à la vue via l'objet scope, et le filtre JSON est appliqué dans la vue.

Filtre JSON dans 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 Explication

  1. Un objet contenant TutorialID: 12 et tutorialName: "Angular" est placé dans une variable membre appelée tutorial et attaché à l'objet de portée.
  2. Le symbole de filtre (|) est suivi du json filtre, qui sérialise l'objet en texte JSON indenté.

⚠️ Correction: Le texte original décrivait cette valeur comme « un nombre » et comme « une chaîne de type JSON ». Ce n'est ni l'un ni l'autre. C'est un JavaL'objet script, et le filtre json, le convertit en une chaîne JSON pour l'affichage.

Sortie :

Filtre JSON dans AngularJS

Ces cinq filtres couvrent les cas les plus courants. Si aucun ne donne le résultat souhaité, vous pouvez créer votre propre filtre.

Filtre personnalisé AngularJS

Il arrive que les filtres intégrés d'AngularJS ne permettent pas de formater correctement la sortie. Dans ce cas, il est possible de créer un filtre personnalisé AngularJS qui renverra la sortie au format souhaité.

Un filtre personnalisé est enregistré sur un module et se comporte ensuite exactement comme un filtre intégré. Les sections suivantes abordent d'abord les filtres standard, car un filtre personnalisé utilise la même syntaxe de pipe, puis expliquent comment en créer un.

Comment créer un filtre personnalisé dans AngularJS

Dans l'exemple ci-dessous, une chaîne de caractères est transmise depuis le contrôleur à la vue via l'objet scope, mais ne doit pas être affiché tel quel. Un filtre personnalisé dans AngularJS ajoute une autre chaîne de caractères et affiche le résultat final.

Créer un filtre personnalisé dans 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 Explication

  1. La chaîne « Angular » est placée dans une variable membre appelée tutorial et attaché à l'objet de portée.
  2. AngularJS fournit filter Méthode d'enregistrement utilisée pour créer un filtre personnalisé. Ce filtre est nommé « Demofilter » et c'est à ce nom que la vue fait référence.
  3. Voici la forme standard d'un filtre personnalisé : la fonction enregistrée est un PERSONNEL Elle renvoie la fonction qui effectue le traitement. Cette fonction reçoit la valeur à filtrer comme premier paramètre et renvoie le résultat — ici, la valeur d’entrée à laquelle est ajouté « Tutorial ».
  4. Le filtre est appliqué dans la vue en utilisant la même syntaxe de pipe que n'importe quel filtre intégré.

💡 Astuce: Les noms de filtres sont généralement en minuscules ou en camelCase. « Demofilter » convient, mais un nom tel que appendTutorial Cela se lit mieux et évite les conflits avec un nom intégré.

Sortie :

Créer un filtre personnalisé dans AngularJS

Le mot « Tutoriel » a été ajouté à la chaîne de caractères transmise. tutorial variable. Ce filtre ajoute toujours le même texte, que la section suivante rend configurable.

Comment transmettre des arguments à un filtre personnalisé

Le filtre ci-dessus intègre en dur le texte qu'il ajoute, il ne peut donc effectuer qu'une seule action. Les filtres intégrés tels que number:2 Il accepte un argument après un deux-points, et un filtre personnalisé peut également le faire : chaque paramètre après le premier correspond à un argument séparé par deux-points dans la vue.

Trois étapes sont nécessaires : ajouter les paramètres après input Dans la fonction renvoyée, fournissez une valeur par défaut pour tout élément optionnel afin que le filtre fonctionne toujours lorsque l'argument est omis, puis transmettez les arguments dans la vue séparés par des deux-points.

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;
  };
});

Le texte se lit alors comme suit, où « Tutoriel » devient suffix et le trait d'union devient separator.

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

Deux détails sont faciles à oublier. Les arguments sont des expressions AngularJS ; une chaîne littérale doit donc être mise entre guillemets, tandis qu’un mot non entre guillemets est interprété comme une propriété de portée. Les filtres s’enchaînent également, chacun recevant la sortie du précédent. {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Mise en garde: Un filtre doit être pur : la même sortie pour une même entrée, sans modification externe. AngularJS met en cache un filtre pur et le réexécute uniquement lorsque l’entrée change. Un filtre qui lit l’horloge ou modifie un service doit être marqué comme tel. $stateful, ce qui désactive la mise en cache et exécute le filtre à chaque cycle de digestion, une cause fréquente de pages lentes.

Les filtres ne sont pas limités aux modèles. Le même filtre peut être appelé depuis JavaScript, comme indiqué ci-après.

Comment utiliser les filtres dans un contrôleur avec le service $filter

L'application d'un filtre dans la vue est courante, mais la valeur transformée est parfois nécessaire dans le contrôleur, par exemple avant l'envoi de données à un serveur. AngularJS expose tous les filtres enregistrés, qu'ils soient intégrés ou personnalisés, via le $filter service. Injectez-le, appelez-le avec le nom du filtre pour récupérer la fonction de filtrage, puis invoquez-la avec la valeur et les arguments éventuels.

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");
}]);

Il existe également une forme plus courte : injecter le nom du filtre suivi de Filter tels que uppercaseFilterLa fonction de filtrage est directement accessible et peut être appelée immédiatement. Les deux formulations aboutissent à la même fonction ; le choix est donc une question de style.

Deux cas d'utilisation reviennent fréquemment. Le premier concerne la préparation d'une charge utile : une date doit généralement parvenir à une API selon un modèle fixe, et $filter('date')(value, 'yyyy-MM-dd') Cela le produit sans modifier la valeur liée au formulaire. La seconde consiste à restreindre une collection une seule fois dans le contrôleur, plutôt que de laisser orderBy dans un ng-répétition expression qui se réexécute à chaque condensé.

Les filtres injectés de cette manière sont toujours enregistrés sur le module ; un filtre personnalisé doit donc être déclaré avec app.filter avant que n'importe quel contrôleur ne le demande $filter Sinon, AngularJS renvoie une erreur de fournisseur inconnu.

Appel d'un filtre dans JavaUn script diffère d'un modèle sur un point important : le résultat est calculé une seule fois et stocké dans la portée, au lieu d'être recalculé à chaque actualisation. C'est pourquoi il est plus rapide pour une valeur qui change rarement, mais inadapté pour une valeur qui doit être modifiée. track saisie utilisateur.

FAQ

Non. AngularJS ne prend en charge que les minuscules et les majuscules. Mettre une majuscule à la première lettre de chaque mot nécessite un filtre personnalisé qui divise la chaîne et la reconstruit, ou une règle CSS `text-transform` si la modification est purement visuelle.

Le filtre est enregistré dans un module différent de celui initialisé par ng-app, ou le script qui le définit s'exécute avant le chargement d'AngularJS. Enregistrez le filtre dans le même module et chargez la bibliothèque en premier.

Oui. Piping une collection à l'intérieur ng-répétition Le filtre trie ou trie les éléments avant leur affichage. Il reçoit le tableau entier et doit renvoyer un tableau.

Oui. AI Les assistants génèrent la fabrique, la fonction renvoyée et la syntaxe de la vue à partir d'une simple description de la règle de formatage. Vérifiez que le filtre généré protège contre les entrées non définies.

Les outils d'IA réécrivent la fabrique sous forme de classe implémentant PipeTransform et déplacent chaque paramètre supplémentaire dans la méthode de transformation. RevExaminez manuellement chaque filtre $stateful, car les pipes impurs doivent être déclarés explicitement.

Résumez cet article avec :