Directive AngularJS ng-repeat avec exemple
James Hartmann
Directive ng-repeat dans AngularJS
Le ng-répétition La directive dans AngularJS est utilisée pour afficher les valeurs répétitives définies dans le contrôleur. Parfois, nous avons besoin d'afficher une liste d'éléments dans la vue. La directive ng-repeat nous aide à afficher une liste d'éléments définis dans le contrôleur sur une page d'affichage.
Exemple de directive AngularJS ng-repeat
Regardons un exemple de directive ng-repeat dans AngularJS :
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
{{tpname.name}}
</li></ul>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.TopicNames =[
{name: "What controller do from Angular's perspective"},
{name: "Controller Methods"},
{name: "Building a basic controller"}];
});
</script>
</body>
</html>
Explication du code :
- Dans le contrôleur, nous définissons d'abord notre tableau d'éléments de liste que nous souhaitons définir dans la vue. Ici, nous avons défini un tableau appelé « TopicNames » qui contient trois éléments. Chaque élément est constitué d'une paire nom-valeur.
- Le tableau de TopicsNames est ensuite ajouté à une variable membre appelée « topic » et attaché à notre objet scope.
- Nous utilisons les balises HTML de (Liste non ordonnée) et (List Item) 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 utilisée pour pointer vers chaque élément du tableau topic.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'affichera lorsque vous exécutez votre code dans le navigateur. Vous verrez tous les éléments du tableau (essentiellement les noms de sujets dans les sujets) affichés.
Sortie :
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 les différentes fonctions de logique métier. Plus tôt, nous avons mentionné l'existence de différentes méthodes dans un contrôleur dans lesquelles 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 logique plus avancée. Par exemple, vous pouvez avoir un contrôleur qui effectue uniquement des opérations sur les nombres et un 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 angulaire.JS.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp">
<div ng-controller="firstcontroller">
<div ng-controller="secondcontroller">
{{lname}}
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('firstcontroller', function($scope){
$scope.pname="firstcontroller";
});
app.controller('secondcontroller', function($scope){
$scope.lname="secondcontroller";
});
</script>
</body>
</html>
Explication du code :
- Nous définissons ici 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 ».
- 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'affichera lorsque vous exécutez votre code dans le navigateur. Vous verrez tout le texte de « secondController » comme prévu.
Sortie :
Résumé
- La directive ng-repeat dans AngularJS est utilisé 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.
