Table AngularJS : tri, tri par ordre et filtre majuscule [Exemples]

Les tableaux sont l'un des éléments couramment utilisés en HTML lorsque vous travaillez avec des pages Web.

Les tableaux en HTML sont conçus à l'aide de la balise HTML

balise – Il s’agit de la balise principale utilisée pour afficher le tableau.
– Cette balise est utilisée pour séparer les lignes du tableau.
– Cette balise est utilisée pour afficher les données réelles du tableau.
– Ceci est utilisé pour les données d’en-tête du tableau.

En utilisant les balises HTML disponibles ci-dessus avec AngularJS, nous pouvons faciliter le remplissage des données des tableaux. En bref, la directive ng-repeat est utilisée pour remplir les données du tableau.

Nous verrons comment y parvenir au cours de ce chapitre. Nous verrons également comment utiliser les filtres orderby et majuscules ainsi que l'attribut $index pour afficher les index de table angulaire.

Remplir et afficher des données dans un tableau

Comme nous l'avons vu dans l'introduction de ce chapitre, la base de création de la structure des tableaux dans une page HTML reste la même.

La structure du tableau est toujours créée en utilisant les balises HTML normales de , , et . Cependant, les données sont renseignées à l'aide de la directive ng-repeat dans AngularJS.
Examinons un exemple simple de la façon dont nous pouvons implémenter des tables angulaires.
Dans cet exemple,

Nous allons créer un tableau angulaire qui contiendra les sujets de cours ainsi que leurs descriptions.

Étape 1) Nous allons d'abord ajouter une balise « style » à notre page HTML afin que le tableau puisse être affiché comme un véritable tableau.

La balise de style est ajoutée à la page HTML. Il s'agit de la manière standard d'ajouter tous les attributs de formatage requis pour les éléments HTML.
Nous ajoutons deux valeurs de style à notre tableau.

La première est qu'il devrait y avoir une bordure solide pour notre table angulaire et
Deuxièmement, un remplissage devrait être mis en place pour nos données de table angulaire.

Étape 2) L'étape suivante consiste à écrire le code pour générer la table, et ses données.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<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.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Explication du code

Nous créons d’abord une variable appelée « tutoriel » et lui attribuons des paires clé-valeur en une seule étape. Chaque paire clé-valeur sera utilisée comme données lors de l'affichage du tableau. La variable du didacticiel est ensuite affectée à l'objet scope afin qu'il soit accessible depuis notre vue.
C'est la première étape de la création d'un tableau, et nous utilisons le étiqueter.
Pour chaque ligne de données, nous utilisons la « directive ng-repeat ». Cette directive parcourt chaque paire clé-valeur dans l'objet de portée du didacticiel à l'aide de la variable ptutor.
Enfin, nous utilisons le tag avec les paires clé-valeur (ptutor.Name et ptutor.Description) pour afficher les données de la table angulaire.

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

Sortie

À partir de la sortie ci-dessus,

Nous pouvons voir que le tableau s'affiche correctement avec les données du tableau de paires clé-valeur définies dans le contrôleur.
Les données du tableau ont été générées en parcourant chacune des paires clé-valeur à l'aide de la « directive ng-repeat ».

Filtre intégré AngularJS

Il est très courant d'utiliser les filtres intégrés dans AngularJS pour modifier la façon dont les données sont affichées dans les tableaux. Nous avons déjà vu les filtres en action dans un chapitre précédent. Faisons un bref récapitulatif des filtres avant de continuer.

Dans Angular.JS, les filtres sont utilisés pour formater la valeur de l'expression avant qu'elle ne soit affichée à l'utilisateur. Un exemple de filtre est le filtre « majuscules » qui prend en charge une sortie de chaîne, formate la chaîne et affiche tous les caractères de la chaîne en majuscules.

Ainsi, dans l'exemple ci-dessous, si la valeur de la variable « TutorialName » est « AngularJS », la sortie de l'expression ci-dessous sera « ANGULARJS ».

Dans cette section, nous examinerons plus en détail comment les filtres orderBy et majuscules peuvent être utilisés dans les tableaux.

Trier le tableau avec le filtre OrderBy

Ce filtre est utilisé pour trier le tableau en fonction de l'une des colonnes du tableau. Dans l'exemple précédent, la sortie de nos données de table angulaire apparaissait comme indiqué ci-dessous.

surchargés	Contrôleurs en action
Modèles photo	Modèles et données de liaison
Directives	Flexibilité des directives

Regardons un exemple sur la façon dont nous pouvons utiliser le filtre « orderBy » et trier les données du tableau angulaire en utilisant la première colonne du tableau.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<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.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Explication du code

Nous utilisons le même code que pour créer notre table, la seule différence cette fois est que nous utilisons le filtre « orderBy » avec la directive ng-repeat. Dans ce cas, nous disons que nous voulons trier la table par la clé « Nom ».

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,

Nous pouvons voir que les données de la table angulaire ont été triées selon les données de la première colonne. Dans notre ensemble de données, les données « Directives » proviennent des données « Modèles », mais comme nous avons appliqué le filtre orderBy, les tableaux sont triés en conséquence.

Tableau d'affichage avec filtre majuscule

Nous pouvons également utiliser le filtre majuscule pour changer les données de la table angulaire en majuscules.

Jetons un coup d'œil à un exemple de la manière dont nous pouvons y parvenir.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<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.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Explication du code

Nous utilisons le même code que pour créer notre table, la seule différence cette fois est que nous utilisons le filtre majuscule. Nous utilisons ce filtre en conjonction avec le « ptutor.Name » afin que tout le texte de la première colonne soit affiché 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 voit qu'en utilisant le filtre « majuscules », toutes les données de la première colonne sont affichées avec des caractères majuscules.

Afficher l'index du tableau ($index)

Pour afficher l'index de la table, ajoutez un avec $index.

Jetons un coup d'œil à un exemple de la manière dont nous pouvons y parvenir.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<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.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Explication du code

Nous utilisons le même code que pour créer notre table, la seule différence cette fois est que nous ajoutons une ligne supplémentaire à notre table pour afficher la colonne d'index. Dans cette colonne supplémentaire, nous utilisons la propriété « $index » fourni par AngularJS, puis en utilisant l'opérateur +1 pour incrémenter l'index de chaque ligne.

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,

Vous pouvez voir qu'une colonne supplémentaire a été créée. Dans cette colonne, nous pouvons voir les index créés pour chaque ligne.

Résumé

Les structures de tableaux sont créées à l'aide des balises standard disponibles dans HTML. Les données du tableau sont renseignées à l'aide de la directive « ng-repeat ».
Le filtre orderBy peut être utilisé pour trier le tableau en fonction de n’importe quelle colonne du tableau.
Le filtre majuscule peut être utilisé pour afficher les données dans n'importe quelle colonne de texte en majuscules.
La propriété « $index » peut être utilisée pour créer un index pour la table.
Un problème courant rencontré lors du développement des tables AngularJS.JS est la mise en œuvre de grands ensembles de données contenant plus de 1000 lignes de données. Parfois l ng-répétition La directive peut ne plus répondre et, par conséquent, la page entière ne répond plus parfois. Dans un tel cas, il est toujours préférable d'avoir une pagination dans laquelle les lignes de données sont réparties sur plusieurs pages.

Tu pourrais aimer:

Remplir et afficher des données dans un tableau

Explication du code

Sortie

ARTICLES LIÉS

Filtre intégré AngularJS

Trier le tableau avec le filtre OrderBy

Explication du code

Sortie

Tableau d'affichage avec filtre majuscule

Explication du code

Sortie

Afficher l'index du tableau ($index)

Explication du code

Sortie

Résumé