Qu'est-ce que le filtre dans AngularJS?
Un filtre dans AngularJS permet de formater la valeur d'une expression à afficher à l'utilisateur sans changer le format d'origine. Par exemple, si vous voulez que votre chaîne soit en minuscules ou en majuscules, vous pouvez le faire à l'aide de filtres. Il existe des filtres intégrés tels que «minuscules», «majuscules», qui peuvent récupérer la sortie en minuscules et en majuscules en conséquence.
De même, pour les nombres, vous pouvez utiliser d'autres filtres.
Au cours de ce tutoriel, nous verrons les différents filtres intégrés standard disponibles dans Angular.
Dans ce didacticiel, vous apprendrez-
- Filtre en minuscules dans AngularJS
- Filtre en majuscules dans AngularJS
- Filtre de nombre dans AngularJS
- Filtre de devises dans AngularJS
- Filtre JSON dans AngularJS
Filtre en minuscules dans AngularJS
Ce filtre prend une sortie de chaîne et met en forme la chaîne et affiche tous les caractères de la chaîne en minuscules.
Regardons un exemple de filtres AngularJS avec l'option Tolowercase AngularJS.
Dans l'exemple ci-dessous, nous utiliserons un contrôleur pour envoyer une chaîne à une vue via l'objet scope. Nous utiliserons ensuite un filtre dans la vue pour convertir la chaîne en minuscules.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Explication du code:
- Ici, nous passons une chaîne, qui est une combinaison de caractères minuscules et majuscules dans une variable membre appelée "tutorialName" et l'attachons à l'objet scope. La valeur de la chaîne transmise est "AngularJS".
- Nous utilisons la variable membre "tutorialName" et mettons un symbole de filtre (|) qui signifie que la sortie doit être modifiée à l'aide d'un filtre. Nous utilisons ensuite le mot-clé minuscule pour dire d'utiliser le filtre intégré pour afficher la chaîne entière en minuscules.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie
- On peut voir que la chaîne "AngularJS" qui a été passée dans la variable tutorialName qui était une combinaison de caractères minuscules et majuscules a été exécutée.
- Après l'exécution, la sortie finale est en minuscules comme indiqué ci-dessus.
Filtre en majuscules dans AngularJS
Ce filtre est similaire au filtre en minuscules; la différence est que prend une sortie de chaîne et met en forme la chaîne et affiche tous les caractères de la chaîne en majuscules.
Regardons un exemple de filtre AngularJS en majuscules avec l'option minuscule.
Dans l'exemple AngularJS capitalize ci-dessous, nous utiliserons un contrôleur pour envoyer une chaîne à une vue via l'objet scope. Nous utiliserons ensuite un filtre dans la vue pour convertir la chaîne en majuscules.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Explication du code:
- Ici, nous passons une chaîne qui est une combinaison de caractères minuscules et majuscules "Angular JS" dans une variable membre appelée "tutorialName" et l'attachons à l'objet scope.
- Nous utilisons la variable membre "tutorialName" et mettons un symbole de filtre (|), ce qui signifie que la sortie doit être modifiée à l'aide d'un filtre. Nous utilisons ensuite le mot-clé majuscule pour dire d'utiliser le filtre intégré pour afficher la chaîne entière en majuscules.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- On peut voir que la chaîne qui a été passée dans la variable tutorialName qui était une combinaison de caractères minuscules et majuscules a été sortie en toutes majuscules.
Filtre de nombre dans AngularJS
Ce filtre met en forme un nombre et peut appliquer une limite aux points décimaux pour un nombre.
Regardons un exemple de filtres AngularJS avec l'option number.
Dans l'exemple ci-dessous,
Nous voulions montrer comment nous pouvons utiliser le filtre numérique pour formater un nombre à afficher avec une restriction de 2 décimales.
Nous utiliserons un contrôleur pour envoyer un numéro à une vue via l'objet scope. Nous utiliserons ensuite un filtre dans la vue pour appliquer le filtre numérique.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Explication du code:
- Ici, nous passons un nombre avec un plus grand nombre de décimales dans une variable membre appelée tutorialID et l'attachons à l'objet scope.
- Nous utilisons la variable membre tutorialID et mettons un symbole de filtre (|) avec le filtre numérique. Maintenant en nombre: 2, les deux indiquent que le filtre doit limiter le nombre de décimales à 2.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- On voit que le nombre qui était passé dans la variable tutorialID qui avait un grand nombre de décimales a été limité à 2 décimales à cause du nombre: 2 filtres qui a été appliqué.
Filtre de devises dans AngularJS
Ce filtre met en forme un filtre de devises en un nombre.
Supposons que si vous vouliez afficher un nombre avec une devise telle que $, ce filtre peut être utilisé.
Dans l'exemple ci-dessous, nous utiliserons un contrôleur pour envoyer un numéro à une vue via l'objet scope. Nous utiliserons ensuite un filtre dans la vue pour appliquer le filtre actuel.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Explication du code:
- Ici, nous passons un nombre dans une variable membre appelée tutorialprice et l'attachons à l'objet scope.
- Nous utilisons la variable membre tutorialprice et mettons un symbole de filtre (|) avec le filtre de devise. Notez que la devise appliquée dépend des paramètres de langue appliqués à la machine.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie
- On peut voir que le symbole monétaire a été ajouté au nombre qui a été passé dans la variable tutorialprice.
- Dans notre cas, étant donné que les paramètres de langue sont l'anglais (États-Unis), le symbole $ est inséré comme devise.
Filtre JSON dans AngularJS
Ce filtre formate une entrée de type JSON et applique le filtre JSON AngularJS pour donner la sortie en JSON.
Dans l'exemple ci-dessous, nous utiliserons un contrôleur pour envoyer un objet de type JSON à une vue via l'objet scope. Nous utiliserons ensuite un filtre dans la vue pour appliquer le filtre JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Explication du code:
- Ici, nous passons un nombre dans une variable membre appelée «tutoriel» et l'attachons à l'objet scope. Cette variable membre contient une chaîne de type JSON de Tutorial ID: 12 et TutorialName: "Angular".
- Nous utilisons le didacticiel sur les variables de membre et mettons un symbole de filtre (|) avec le filtre JSON.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- On peut voir que le JSON, comme une chaîne, est analysé et affiche un objet JSON approprié dans le navigateur.
Résumé:
- Les filtres sont utilisés pour modifier la façon dont la sortie est affichée à l'utilisateur.
- Angular fournit des filtres intégrés tels que les filtres minuscules et majuscules pour changer la sortie des chaînes en minuscules et majuscules respectivement.
- Il existe également une disposition pour modifier la façon dont les nombres sont affichés en utilisant le filtre numérique en spécifiant le nombre de points décimaux à afficher dans le nombre.
- On peut également utiliser le filtre de devise pour ajouter le symbole de devise à n'importe quel nombre.
- S'il est nécessaire d'avoir une sortie spécifique à json, angular fournit également le filtre JSON pour filtrer toute chaîne de type JSON au format JSON.