AngularJS - Gestion des éléments répétitifs

Un élément clé des applications Web est la exemple de listeCe sera toujours important chaque fois que nous travaillerons avec des bases de données, car nous devons afficher les éléments stockés, ainsi que, par exemple, si nous gérons une boutique en ligne, nous devons afficher une liste de produits.
Ce qu'il faut comprendre, c'est que bien que les enregistrements soient différents, les éléments en tant que tels sont répétés, puisqu'il s'agit probablement de lignes d'un tableau ou d'une liste ordonnée, quelle que soit la différence de contenu ne représente pas une différence de structure.
AngularJS ne nous complique pas la vie, simplement si nous voulons utiliser ou faire une liste, nous devons utiliser ng-répéter qui crée un élément pour chaque élément contenu dans une liste, avec cela nous pouvons passer une liste de produits et générer facilement un tableau.
Disons que nous faisons une liste d'étudiants pour une école, la clé est de générer la liste, normalement nous l'obtiendrions de certains service Web qui consulte une base de données mais pour simplifier nous allons faire une liste nous-mêmes, puis nous appelons cette liste au sein de notre $ portée pour pouvoir l'utiliser, avec lui dans le HTML nous pouvons incorporer l'instruction ng-répéter que nous avions mentionné, voyons le code suivant :

 var étudiants = [{nom : 'María Rojo', id : '1'}, {nom : 'Manolo Rodriguez', id : '2'}, {nom : 'Joao Pinto', id : '3'}]; function StudentListController ($ scope) {$ scope.students = étudiants; } 

Ici, nous avons défini la liste des étudiants, puis nous définissons le contrôleur avec lequel nous passons ladite liste au $ portée du manette, maintenant nous devons écrire le code HTML:

 
 
 {{nom d'étudiant}}

Ici, nous voyons que nous définissons notre liste comme un contrôleur de AngularJS et avec elle le $ portée dudit contrôleur nous permet d'accéder à la liste des étudiants, puis nous utilisons ng-répéter vous indiquant que vous allez créer un élève pour chaque élément de la liste des élèves et enfin au sein de la

nous créons une ancre qui nous emmène à un autre endroit dans l'application. Voyons l'image suivante de ce à quoi cela ressemble dans notre navigateur :

Fonction d'épissure ()Une autre chose que nous pouvons faire est d'incorporer de nouveaux éléments dans la liste, pour cela nous avons la fonction épissure ()Si, par exemple, nous l'incorporons dans un bouton qui ajoute de nouveaux étudiants, nous verrons automatiquement le changement, grâce au fait que AngularJS Il nous donne cette touche de rafraîchissement en temps réel du document sans avoir à recharger la page.
Voyons dans le code suivant à quoi ressemblerait le contrôleur pour ajouter un étudiant :

 var étudiants = [{nom : 'María Rojo', id : '1'}, {nom : 'Manolo Rodriguez', id : '2'}, {nom : 'Joao Pinto', id : '3'}]; function StudentListController ($ scope) {$ scope.students = étudiants; $ scope.addNew = function () {$ scope.students.splice (1, 0, {nom : 'Joaquin Fernandez', id : '4'}); }; } 

Il ne nous reste plus qu'à appeler la nouvelle fonction dans notre HTML, nous pouvons le faire de la manière suivante :

 {{nom d'étudiant}}

Insérer

Voyons à quoi cela ressemble dans notre navigateur :

Nous voyons comment nous avons ajouté le nouvel étudiant à la liste, cependant à chaque fois que nous cliquons sur le bouton nous ajoutons la même personne, c'est parce que nous n'avons pas fait de code dynamique, mais c'est une autre affaire, ce que nous devons souligner c'est que nous devions ajouter un auquel nous avons placé le contrôleur, de cette façon nous pourrions incorporer notre bouton dans le $ portée.
Avec cela, nous terminons ce tutoriel, car nous voyons la gestion des éléments répétés dans AngularJS C'est assez simple et nous donne la possibilité de créer des listes rapidement comme nous avons pu le voir dans les exemples.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif