AngularJS ng-repeat-richtlijn met voorbeeld

ng-repeat-richtlijn in AngularJS

Uw partner voor 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 Verklaring:

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 wilt misschien meerdere controllers definiëren om verschillende functies voor bedrijfslogica te scheiden. Eerder noemden we het hebben van verschillende methoden in een controller waarbij één methode aparte functionaliteit had voor optellen en aftrekken van getallen. Nou, u kunt meerdere controllers hebben om een geavanceerdere scheiding van logica te hebben. U kunt bijvoorbeeld één controller hebben die alleen bewerkingen op getallen uitvoert en de andere die bewerkingen op strings 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 Verklaring:

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.

Je houdt misschien van: