Parfois, les filtres intégrés dans Angular ne peuvent pas répondre aux besoins ou aux exigences de filtrage de la sortie. Dans un tel cas, un filtre personnalisé peut être créé qui peut transmettre la sortie de la manière requise.
Comment créer un filtre personnalisé
Dans l'exemple ci-dessous, nous allons passer une chaîne à la vue depuis le contrôleur via l'objet scope, mais nous ne voulons pas que la chaîne soit affichée telle quelle.
Nous voulons nous assurer que chaque fois que nous affichons la chaîne, nous transmettons un filtre personnalisé qui ajoutera une autre chaîne et affichera la chaîne complète à l'utilisateur.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Explication du code:
- Ici, nous passons une chaîne "Angular" dans une variable membre appelée tutoriel et l'attachons à l'objet scope.
- Angular fournit le service de filtrage qui peut être utilisé pour créer notre filtre personnalisé. Le «Demofilter» est un nom donné à notre filtre.
- Il s'agit de la manière standard de définir un filtre personnalisé dans lequel une fonction est renvoyée. Cette fonction est ce qui contient le code personnalisé pour créer le filtre personnalisé. Dans notre fonction, nous prenons une chaîne "Angular" qui est passée de notre vue au filtre et y ajoutons la chaîne "Tutorial".
- Nous utilisons notre Demofilter sur notre variable membre qui a été passée du contrôleur à la vue.
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 notre filtre personnalisé a été appliqué et
- Le mot «Tutoriel» a été ajouté à la fin de la chaîne, qui a été transmise dans le didacticiel sur les variables de membre.
Résumé:
S'il y a une exigence qui n'est satisfaite par aucun des filtres définis en angulaire, vous pouvez créer votre filtre personnalisé et ajouter votre code personnalisé pour déterminer le type de sortie que vous voulez du filtre.