Table AngularJS: Trier, Trier par & Filtre en majuscules (exemples)

Les tableaux sont l'un des éléments couramment utilisés en HTML lors de l'utilisation de pages Web.

Les 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 la table.
   - Cette balise est utilisée pour séparer les lignes dans la table.

   - Cette balise est utilisée pour afficher les données réelles de la table.

   - Ceci est utilisé pour les données d'en-tête de table. En utilisant les balises HTML disponibles ci-dessus avec AngularJS, nous pouvons faciliter le remplissage des données de table. En bref, la directive ng-repeat est utilisée pour remplir les données de table. Nous verrons comment y parvenir au cours de ce chapitre. Nous verrons également comment nous pouvons utiliser les filtres orderby et majuscules ainsi que l'attribut $ index pour afficher les index de table angulaire. Dans ce didacticiel, vous apprendrez- Remplir et afficher les données dans un tableau Filtre intégré AngularJS Trier la table avec le filtre OrderBy Afficher le tableau avec filtre en majuscules Afficher l'index de la table ($ index) Remplir et afficher les données dans un tableau Comme nous l'avons vu dans l'introduction de ce chapitre, la base de création de la structure de tableau dans une page HTML reste la même. La structure de la table est toujours créée en utilisant les balises HTML normales de , , et . Cependant, les données sont remplies à l'aide de la directive ng-repeat dans AngularJS. Regardons un exemple simple de la façon dont nous pouvons implémenter des tables angulaires. Dans cet exemple, Nous allons créer une table angulaire qui contiendra des sujets de cours avec leurs descriptions. Étape 1) Nous allons d'abord ajouter une balise "style" à notre page HTML afin que le tableau puisse être affiché comme un tableau approprié. La balise de style est ajoutée à la page HTML. Il s'agit de la méthode standard pour ajouter les attributs de mise en forme requis pour les éléments HTML. Nous ajoutons deux valeurs de style à notre table. La première est qu'il devrait y avoir une bordure solide pour notre table angulaire et Deuxièmement, il devrait y avoir un remplissage 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. Guru99 Global Event {{ptutor.Name}} {{ptutor.Description}} 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'une table, et nous utilisons la balise . 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 tuto, rial à l'aide de la variable ptutor. Enfin, nous utilisons la balise 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'affiche lorsque vous exécutez votre code dans le navigateur. Production: À 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éfini dans le contrôleur. Les données de la table ont été générées en parcourant chacune des paires clé-valeur en utilisant la "directive ng-repeat". Filtre intégré AngularJS Il est très courant d'utiliser les filtres intégrés dans AngularJS pour changer la façon dont les données sont affichées dans les tableaux. Nous avons déjà vu des 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 une sortie de chaîne et met en forme 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'. {{TurotialName | majuscule}} Dans cette section, nous examinerons plus en détail comment les filtres orderBy et majuscules peuvent être utilisés dans les tableaux. Trier la table 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 apparaît comme indiqué ci-dessous. Contrôleurs Contrôleurs en action Des modèles 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 de la table angulaire en utilisant la première colonne de la table. Guru99 Global Event {{ptutor.Name}} {{ptutor.Description}} Explication du code: Nous utilisons le même code que nous l'avons fait 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 ordonner la table par la clé "Nom". 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, 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 tables sont triées en conséquence. Afficher le tableau avec filtre en majuscules Nous pouvons également utiliser le filtre en majuscules pour changer les données de la table angulaire en majuscules. Jetons un coup d'œil à un exemple de la façon dont nous pouvons y parvenir. Guru99 Global Event {{ptutor.Name | uppercase}} {{ptutor.Description}} Explication du code: Nous utilisons le même code que nous l'avons fait pour créer notre table, la seule différence cette fois est que nous utilisons le filtre en majuscules. Nous utilisons ce filtre en conjonction avec le "ptutor.Name" afin que tout le texte de la première colonne soit affiché 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, Nous pouvons voir 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 de la table ($ index) Pour afficher l'index de la table, ajoutez un avec $ index. Jetons un coup d'œil à un exemple de la façon dont nous pouvons y parvenir. Guru99 Global Event {{$index + 1}} {{ptutor.Name}} {{ptutor.Description}} Explication du code: Nous utilisons le même code que nous l'avons fait 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" fournie par AngularJS, puis nous utilisons l'opérateur +1 pour incrémenter l'index pour chaque ligne. 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, 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 tableau 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 la table en fonction de n'importe quelle colonne de la table. Le filtre en majuscules 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 avec les tables AngularJS.JS est l'implémentation de grands ensembles de données contenant plus de 1000 lignes de données. Parfois, la directive ng-repeat peut devenir non réactive, et par conséquent, la page entière devient parfois insensible. 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.