AngularJS ng-gentag direktiv med eksempel

ng-gentagelsesdirektiv i AngularJS

ng-gentag direktiv i AngularJS bruges til at vise gentagne værdier defineret i controlleren. Nogle gange kræver vi at vise en liste over elementer i visningen. ng-repeat-direktivet hjælper os med at vise en liste over elementer defineret i controlleren til en visningsside.

AngularJS ng-gentagelsesdirektiv eksempel

Lad os se et eksempel på ng-repeat-direktivet i 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>

Kodeforklaring:

I controlleren definerer vi først vores række af listeelementer, som vi ønsker at definere i visningen. Herovre har vi defineret et array kaldet "Emnenavne", som indeholder tre elementer. Hvert element består af et navn-værdi-par.
Rækken af TopicsNames føjes derefter til en medlemsvariabel kaldet "topics" og knyttes til vores scope-objekt.
Vi bruger HTML-tags af (Uordnet liste) og (List Item) for at vise listen over elementer i vores array. Vi bruger derefter ng-repeat-direktivet til at gennemgå hvert eneste element i vores array. Ordet "tpname" er en variabel, som bruges til at pege på hvert element i array-emnerne.
I dette vil vi vise værdien af hvert array-element.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren. Du vil se alle elementer i arrayet (grundlæggende emnenavnene i emner) vist.

Output:

AngularJS Multiple Controllere

Et eksempel på avanceret controller ville være konceptet med at have flere controllere i en vinkel JS-applikation.

Du ønsker måske at definere flere controllere for at adskille forskellige forretningslogikfunktioner. Tidligere nævnte vi om at have forskellige metoder i en controller, hvor en metode havde separat funktionalitet til addition og subtraktion af tal. Nå, du kan have flere controllere for at have en mere avanceret adskillelse af logik. For eksempel kan du have en controller, der kun udfører operationer på tal, og den anden, der udfører operationer på strenge.

Lad os se på et eksempel på, hvordan vi kan definere flere controllere i en angular.JS-applikation.

<!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>

Kodeforklaring:

Her definerer vi 2 controllere kaldet "firstController" og "secondController". For hver controller tilføjer vi også noget kode til behandling. I vores firstController vedhæfter vi en variabel kaldet "pname", som har værdien "firstController", og i secondController vedhæfter vi en variabel kaldet "lname", som har værdien "secondController".
I visningen har vi adgang til begge controllere og bruger medlemsvariablen fra den anden controller.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren. Du vil se al tekst af "secondController" som forventet.

Output:

Resumé

ng-gentagelsesdirektivet i AngularJS bruges til at vise flere gentagne elementer.
Vi havde også et kig på en avanceret controller, som så på definitionen af flere controllere i en applikation.

Du kan lide: