Filtres AngularJS et filtre personnalisé AngularJS avec exemple

Qu’est-ce que le filtre dans AngularJS ?

A Filtrer dans AngularJS permet de formater la valeur d'une expression à afficher à l'utilisateur sans modifier le format d'origine. Par exemple, si vous souhaitez que votre chaîne soit en minuscules ou en majuscules, vous pouvez le faire en utilisant des filtres. Il existe des filtres intégrés tels que « minuscules », « majuscules », qui peuvent récupérer les sorties en minuscules et en majuscules en conséquence.

Filtre personnalisé AngularJS

Parfois, les filtres intégrés dans Angular ne peuvent pas répondre aux besoins ou aux exigences de filtrage de sortie. Dans un tel cas, un filtre personnalisé AngularJS peut être créé, qui peut transmettre la sortie de la manière requise.

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 standards disponibles dans Angular.

Comment créer un filtre personnalisé dans AngularJS

Dans l'exemple de filtre personnalisé AngularJS ci-dessous, nous allons transmettre 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 afficherons la chaîne, nous transmettrons un filtre personnalisé dans AngularJS, qui ajoutera une autre chaîne et affichera la chaîne complétée à l'utilisateur.

<!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>

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 dont les filtres personnalisés dans AngularJS sont définis et dans lesquels une fonction est renvoyée. Cette fonction contient le code personnalisé pour créer le filtre personnalisé. Dans notre fonction, nous prenons une chaîne « Angular » qui est transmise de notre vue au filtre et y ajoutons la chaîne « Tutorial ».
Nous utilisons notre Demofilter sur notre variable membre qui a été transmise du contrôleur à la vue.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

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 la variable membre tutoriel.

Filtre minuscule dans AngularJS

Ce filtre prend une sortie de chaîne, formate la chaîne et affiche tous les caractères de la chaîne en minuscules.

Regardons un exemple de filtres AngularJS avec l'option AngularJS en minuscules.

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.

<!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>

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 (|) ce qui signifie que la sortie doit être modifiée à l'aide d'un filtre. Nous utilisons ensuite le mot-clé lowercase pour indiquer 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'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie

On peut voir que la chaîne « AngularJS » qui a été passée dans la variable tutorielName 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 majuscule dans AngularJS

Ce filtre est similaire au filtre minuscule ; la différence est qu'il prend une sortie de chaîne, formate la chaîne et affiche tous les caractères de la chaîne en majuscules.

Regardons un exemple de filtre de capitalisation AngularJS avec l'option minuscule.

Dans l'exemple de majuscule AngularJS 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 majuscule.

<!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>

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é uppercase pour indiquer d'utiliser le filtre intégré pour afficher la chaîne entière en majuscule.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie,

On peut voir que la chaîne qui a été transmise dans la variable tutorielName qui était une combinaison de caractères minuscules et majuscules a été affichée en majuscules.

Filtre numérique dans AngularJS

Ce filtre formate un nombre et peut appliquer une limite aux points décimaux d'un nombre.

Regardons un exemple de filtres AngularJS avec l'option numérique.

Dans l'exemple ci-dessous,

Nous voulions montrer comment 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.

<!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>

Explication du code

Ici, nous transmettons un nombre avec un plus grand nombre de décimales dans une variable membre appelée tutorielID et l'attachons à l'objet scope.
Nous utilisons la variable membre tutorielID et mettons un symbole de filtre (|) avec le filtre numérique. Désormais dans le nombre : 2, le deux indique que le filtre doit limiter le nombre de décimales à 2.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie,

On constate que le nombre qui a été passé dans la variable tutorielID 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 formate un filtre de devise en nombre.

Supposons que si vous souhaitez 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.

<!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>

Explication du code

Ici, nous transmettons un numéro dans une variable membre appelée tutorielprice et l'attachons à l'objet scope.
Nous utilisons la variable membre tutorielprix 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'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

De la sortie

On peut voir que le symbole monétaire a été ajouté au nombre qui a été transmis dans la variable tutorielprix.
Dans notre cas, puisque les paramètres de langue sont l'anglais (États-Unis), le symbole $ est inséré comme devise.

Filtre JSON dans AngularJS

Ce filtre formate un JSON comme l'entrée et applique le filtre AngularJS JSON 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.

<!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>

Explication du code

Ici, nous transmettons un numéro 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 membres et mettons un symbole de filtre (|) avec le filtre JSON.

Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.

Sortie :

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 modifier la sortie des chaînes en minuscules et majuscules respectivement.
Il existe également une possibilité de 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 monétaire pour ajouter le symbole monétaire à n’importe quel nombre.
S'il est nécessaire d'avoir une sortie spécifique à JSON, angulaire fournit également le filtre JSON pour filtrer toute chaîne de type JSON au format JSON.
S'il existe une exigence qui n'est satisfaite par aucun des filtres définis dans angulaire, vous pouvez créer votre filtre personnalisé et ajouter votre code personnalisé pour déterminer le type de sortie que vous souhaitez du filtre.

Tu pourrais aimer:

Qu’est-ce que le filtre dans AngularJS ?

Filtre personnalisé AngularJS

Comment créer un filtre personnalisé dans AngularJS

Explication du code

ARTICLES LIÉS

Filtre minuscule dans AngularJS

Explication du code

Filtre majuscule dans AngularJS

Explication du code

Filtre numérique dans AngularJS

Explication du code

Filtre de devises dans AngularJS

Explication du code

Filtre JSON dans AngularJS

Explication du code

Résumé