AngularJS ng-repeat-richtlijn met voorbeeld
James Hartman
ng-repeat-richtlijn in AngularJS
De ng-herhalen richtlijn in AngularJS wordt gebruikt om herhalende waarden weer te geven die in de controller zijn gedefinieerd. Soms is het nodig dat er een lijst met items in de weergave wordt weergegeven. De ng-repeat-richtlijn helpt ons een lijst met items weer te geven die in de controller zijn gedefinieerd op een weergavepagina.
AngularJS ng-repeat richtlijnvoorbeeld
Laten we een voorbeeld bekijken van de ng-repeat-richtlijn in 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>
Code Uitleg:
- In de controller definiëren we eerst onze reeks lijstitems die we in de weergave willen definiëren. Hier hebben we een array gedefinieerd met de naam “TopicNames” die drie items bevat. Elk item bestaat uit een naam-waardepaar.
- De array met TopicsNames wordt vervolgens toegevoegd aan een lidvariabele genaamd “topics” en gekoppeld aan ons scope-object.
- Wij gebruiken de HTML-tags van (Ongeordende lijst) en (Lijstitem) om de lijst met items in onze array weer te geven. Vervolgens gebruiken we de ng-repeat-richtlijn om elk item in onze array te doorlopen. Het woord “tpname” is een variabele die wordt gebruikt om naar elk item in de array topics.TopicNames te verwijzen.
- Hierin zullen we de waarde van elk array-item weergeven.
Als de code succesvol is uitgevoerd, wordt de volgende Output getoond wanneer u uw code in de browser uitvoert. U ziet alle items van de array (in principe de TopicNames in topics) weergegeven.
Output:
AngularJS Meerdere controllers
Een voorbeeld van een geavanceerde controller is het concept van het hebben van meerdere controllers in een hoekige JS-applicatie.
U kunt ervoor kiezen om meerdere controllers te definiëren om verschillende bedrijfslogicafuncties te scheiden. Eerder hebben we al gesproken over het gebruik van verschillende methoden in een controller, waarbij één methode aparte functionaliteit biedt voor optellen en aftrekken.tracbewerkingen met getallen. Je kunt meerdere controllers gebruiken voor een meer geavanceerde scheiding van logica. Je kunt bijvoorbeeld een controller hebben die alleen bewerkingen met getallen uitvoert en een andere die bewerkingen met tekenreeksen uitvoert.
Laten we een voorbeeld bekijken van hoe we meerdere controllers kunnen definiëren in een angular.JS-toepassing.
<!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>
Code Uitleg:
- Hier definiëren we twee controllers genaamd “firstController” en “secondController”. Voor elke controller voegen we ook een code toe voor verwerking. In onze firstController voegen we een variabele toe met de naam “pname” die de waarde “firstController” heeft, en in de secondController voegen we een variabele toe met de naam “lname” die de waarde “secondController” heeft.
- In de weergave hebben we toegang tot beide controllers en gebruiken we de lidvariabele van de tweede controller.
Als de code succesvol is uitgevoerd, wordt de volgende Output getoond wanneer u uw code in de browser uitvoert. U ziet alle tekst van "secondController" zoals verwacht.
Output:
Samenvatting
- De ng-repeat-richtlijn in angularjs wordt gebruikt om meerdere herhalende items weer te geven.
- We hebben ook gekeken naar een geavanceerde controller die keek naar de definitie van meerdere controllers in een applicatie.
