Directive AngularJS ng-repeat avec exemple

Table des matières:

Anonim

Affichage d'informations répétées

Parfois, nous pouvons être amenés à afficher une liste d'éléments dans la vue, la question est donc de savoir comment afficher une liste d'éléments définis dans notre contrôleur sur notre page de visualisation.

Angular fournit une directive appelée "ng-repeat" qui peut être utilisée pour afficher les valeurs répétitives définies dans notre contrôleur.

Regardons un exemple de la façon dont nous pouvons y parvenir.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Explication du code:

  1. Dans le contrôleur, nous définissons d'abord notre tableau d'éléments de liste que nous voulons définir dans la vue. Ici, nous avons défini un tableau appelé "TopicNames" qui contient trois éléments. Chaque élément se compose d'une paire nom-valeur.
  2. Le tableau de TopicsNames est ensuite ajouté à une variable membre appelée "topics" et attaché à notre objet scope.
  3. Nous utilisons les balises HTML de
      (Liste non ordonnée) et
    • (Élément de liste) pour afficher la liste des éléments de notre tableau. Nous utilisons ensuite la directive ng-repeat pour parcourir chaque élément de notre tableau. Le mot "tpname" est une variable qui est utilisée pour pointer vers chaque élément du tableau topics.TopicNames.
    • En cela, nous afficherons la valeur de chaque élément du tableau.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur. Vous verrez tous les éléments du tableau (essentiellement les TopicNames dans les sujets) affichés.

Production:

Contrôleurs multiples Angularjs

Un exemple de contrôleur avancé serait le concept d'avoir plusieurs contrôleurs dans une application JS angulaire.

Vous souhaiterez peut-être définir plusieurs contrôleurs pour séparer différentes fonctions de logique métier. Plus tôt, nous avons mentionné avoir différentes méthodes dans un contrôleur dans lequel une méthode avait des fonctionnalités distinctes pour l'addition et la soustraction de nombres. Eh bien, vous pouvez avoir plusieurs contrôleurs pour avoir une séparation plus avancée de la logique. Par exemple, vous pouvez avoir un contrôleur qui ne fait que des opérations sur les nombres et l'autre qui effectue des opérations sur des chaînes.

Regardons un exemple de la façon dont nous pouvons définir plusieurs contrôleurs dans une application angular.JS.

Event Registration


Guru99 Global Event


{{lname}}

Explication du code:

  1. Ici, nous définissons 2 contrôleurs appelés "firstController" et "secondController". Pour chaque contrôleur, nous ajoutons également du code pour le traitement. Dans notre firstController, nous attachons une variable appelée "pname" qui a la valeur "firstController", et dans le secondController nous attachons une variable appelée "lname" qui a la valeur "secondController".
  2. Dans la vue, nous accédons aux deux contrôleurs et utilisons la variable membre du deuxième contrôleur.

Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur. Vous verrez tout le texte de "secondController" comme prévu.

Production:

Résumé

  • La directive ng-repeater peut être utilisée pour afficher plusieurs éléments répétitifs.
  • Nous avons également examiné un contrôleur avancé qui examinait la définition de plusieurs contrôleurs dans une application.