Tableau AngularJS : Trier avec orderBy et filtre de casse-majuscules

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

⚡ Résumé intelligent

Le tri, l'ordonnancement et la mise en forme du texte des tableaux AngularJS reposent sur la directive ng-repeat et une expression de filtre. Cette page explique comment les paramètres orderBy, uppercase, filter et $index transforment un tableau HTML simple en une grille dynamique alimentée par les données.

  • 🧱 Structure: Les balises table, tr, td et th constituent toujours la grille, donc aucun balisage spécifique à AngularJS ne remplace le HTML standard.
  • (I.e. Population : La directive ng-repeat parcourt un tableau sur l'objet scope et émet une ligne pour chaque élément trouvé.
  • ️ Classement: Le filtre orderBy trie les lignes selon n'importe quelle clé, et un indicateur reverse inverse le sens du tri sur demande.
  • 🔤 Mise en page: Le filtre de mise en majuscules met en majuscules une seule colonne sans modifier les données sous-jacentes dans le contrôleur.
  • ???? Recherche: Le filtre associé à une entrée ng-model réduit le nombre de lignes visibles au fur et à mesure que le lecteur saisit du texte.
  • (I.e. Numérotage: La propriété $index fournit un compteur à base zéro, donc l'ajout de un produit un numéro de ligne lisible.
  • 🚀 Échelle: Au-delà de mille lignes, associez limitTo à la pagination et track par pour que la page reste réactive.
En savoir plus

Tableau AngularJS

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

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

  1. balise – Il s’agit de la balise principale utilisée pour afficher le tableau.
  2. – Cette balise est utilisée pour séparer les lignes du tableau.
  3. – Cette balise est utilisée pour afficher les données réelles du tableau.
  4. – 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 dans ce chapitre. Nous verrons également comment utiliser les filtres `orderBy` et `uppercase`, ainsi que l'attribut `$index` pour afficher les index des tableaux AngularJS. La première étape consiste à créer le balisage.

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.
Prenons un exemple simple de la façon dont nous pouvons implémenter des tableaux AngularJS.
Dans cet exemple,

Nous allons créer un tableau AngularJS qui contiendra les sujets des 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.

Remplir et afficher des données dans un tableau

  1. 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.
  2. Nous ajoutons deux valeurs de style à notre tableau.
  • L'une des solutions consiste à ajouter une bordure solide à notre tableau AngularJS.
  • Deuxièmement, il convient d'ajouter un espacement autour des données de notre tableau AngularJS.

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

Remplir et afficher des données dans un 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">
            <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>

⚠️ Attention : Cette liste est reproduite exactement telle que publiée, et quatre lignes qu'elle contient sont erronées. chrset fautes d'orthographe charsetTrois instances d'AngularJS se chargent simultanément, ce qui est une de trop. lib/bootstrap.js et lib/bootstrap.css n'existent pas. Gardez angular.min.js seulement.

Code Explication

  1. 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.
  2. C'est la première étape de la création d'un tableau, et nous utilisons le étiqueter.
  3. 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.
  4. Enfin, nous utilisons le tag avec les paires clé-valeur (ptutor.Name et ptutor.Description) pour afficher les données du tableau AngularJS.

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

Sortie

Remplir et afficher des données dans un tableau

À 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 ».

Les lignes brutes ne sont que le point de départ, car les filtres déterminent comment ces lignes sont ordonnées et formatées.

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 AngularJS, les filtres servent à formater la valeur d'une expression avant son affichage à l'utilisateur. Le filtre « uppercase », par exemple, prend une chaîne de caractères en sortie, la formate et affiche tous ses caractères 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 ».

{{ TutorialName | uppercase }}

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

Filtres AngularJS courants utilisés avec les tableaux

Le tableau ci-dessous compare les filtres les plus fréquemment utilisés dans une expression ng-repeat.

Filtre Interet Exemple
commandé par Trie les lignes selon une clé | orderBy : 'Name'
une fonction filtre Conserve les lignes correspondantes | filter : searchText
majuscule Texte en majuscules | uppercase
minuscule Texte en minuscules | lowercase
limiterÀ Nombre de rangées de casquettes | limitTo : 25
monnaie Formats d'argent | currency : '$'
données Formats de dates | date : 'dd MMM yyyy'
nombre Définit les décimales | number : 2

Le tri est le filtre demandé en premier par les lecteurs, le filtre orderBy vient donc ensuite.

Trier le tableau avec le filtre OrderBy

Ce filtre permet de trier le tableau en fonction de l'une de ses colonnes. Dans l'exemple précédent, le résultat pour les données de notre tableau AngularJS s'affichait comme ci-dessous.

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

Prenons l'exemple de l'utilisation du filtre « orderBy » pour trier les données d'un tableau AngularJS en fonction de la première colonne.

Trier le tableau avec le filtre OrderBy

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

Code Explication

  1. 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

Trier le tableau avec le filtre OrderBy

De la sortie,

  • On constate que les données du tableau AngularJS sont triées selon l'ordre de la première colonne. Le tableau est déclaré dans l'ordre Contrôleurs, Modèles, Directives ; par conséquent, sans filtre, les lignes apparaissent dans cet ordre. orderBy : 'Name' organise les valeurs Name par ordre alphabétique, ce qui place les Directives avant les Modèles et produit Contrôleurs, Directives, Modèles.

Trier dans Reverse et à partir des en-têtes de colonnes

Le filtre orderBy accepte un deuxième argument. Passage true inverse le sens, et le stockage de la clé et de cet indicateur sur la portée permet à un lecteur de trier à nouveau le tableau en cliquant sur un en-tête, comme le trier par référence décrit.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Le tri modifie l'ordre des lignes. Le filtre suivant modifie l'affichage d'une seule colonne.

Ne manquez pas:

Tableau d'affichage avec filtre majuscule

Nous pouvons également utiliser le filtre uppercase pour convertir les données du tableau AngularJS en majuscules.

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

Tableau d'affichage avec filtre majuscule

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

Code Explication

  1. 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

Tableau d'affichage avec filtre majuscule

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.

La mise en forme d'une colonne est utile, et les lecteurs souhaitent souvent qu'un numéro de ligne apparaisse à côté.

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.

Afficher l'index 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">
            <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>

Code Explication

  1. 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

Afficher l'index du tableau

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.

Trois lignes tiennent sur un seul écran. Un jeu de données réaliste ne tient pas sur trois lignes ; les lecteurs ont donc besoin d’un moyen de le parcourir.

Comment filtrer et rechercher des données de tableau AngularJS

AngularJS fournit un filtre nommé filterPlacé après ng-repeat, ce code compare chaque élément du tableau à une valeur et ne conserve que les lignes correspondantes. Liez cette valeur à une zone de texte avec ng-model et le tableau se rétrécit automatiquement pendant la saisie, sans gestionnaire d'événements ni code de contrôleur.

Ajouter une recherche en direct Box

Ajoutez un champ de saisie au-dessus du tableau et filtrez-le. Les deux champs partagent la même propriété de portée, ce qui permet à AngularJS de réévaluer l'expression à chaque frappe.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Explication:

  1. Le champ d'entrée écrit ce qui est saisi dans searchText sur le terrain.
  2. filter : searchText conserve les lignes dont le nom ou Description contient cette sous-chaîne, sans tenir compte de la casse.
  3. Pour effectuer une recherche dans une seule colonne, transmettez un objet : filter : {Name : searchText}.
  4. Chaîne de filtres, donc | filter : searchText | orderBy : 'Name' Il effectue d'abord une recherche, puis trie les survivants.

Gardez les grands tableaux réactifs

Un problème courant rencontré lors du développement de tableaux AngularJS est la gestion de grands ensembles de données contenant mille lignes ou plus. ng-répétition Cette directive crée une portée et un observateur par ligne, ce qui peut empêcher la page de répondre. Répartissez plutôt les lignes sur plusieurs pages et ajoutez-les. track by Les lignes existantes sont donc réutilisées au lieu d'être reconstruites.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

FAQ

ng-repeat requiert une clé unique pour chaque ligne. Deux valeurs identiques génèrent une erreur de doublons. Ajoutez une propriété distincte ou écrivez track par $index, la position de la ligne devient donc la clé au lieu de sa valeur.

Oui. Passez un tableau de clés, tel que orderBy : ['Name','DescriptAngularJS trie d'abord selon la première clé, puis départage les égalités avec la seconde. Préfixez une clé par un signe moins pour inverser uniquement cette clé.

Chaque ligne ng-repeat expose les booléens $even et $odd. Liez l'un d'eux avec ng-class ou ng-if pour appliquer une couleur de fond, ce qui produit des lignes rayées sans aucun sélecteur CSS supplémentaire sur le tableau.

Des assistants tels que Copilote GitHub Ils créent rapidement le balisage ng-repeat, mais inventent encore des chemins de script et font des fautes d'orthographe dans les attributs. Vérifiez chaque suggestion par rapport à la documentation. Référence de filtre AngularJS avant le navireping.

Les outils d'IA réécrivent ng-repeat sous forme de bloc de contrôle de flux et déplacent les filtres dans des pipes ou des signaux. Parce que Angulaire ne comporte pas de pipeline orderBy ou filter intégré ; vérifiez manuellement chaque tri et recherche générés.

Résumez cet article avec :