AngularJS ng-repeat-Direktive mit Beispiel

ng-repeat-Direktive in AngularJS

Der ng-Wiederholung Die Direktive in AngularJS wird verwendet, um sich wiederholende Werte anzuzeigen, die im Controller definiert sind. Manchmal müssen wir eine Liste von Elementen in der Ansicht anzeigen. Die ng-repeat-Direktive hilft uns, eine Liste der im Controller definierten Elemente auf einer Ansichtsseite anzuzeigen.

Beispiel für eine AngularJS-Anweisung „ng-repeat“.

Schauen wir uns ein Beispiel für die ng-repeat-Direktive in AngularJS an:

ng-repeat-Direktive 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-Erklärung:

  1. Im Controller definieren wir zunächst unser Array von Listenelementen, die wir in der Ansicht definieren möchten. Hier haben wir ein Array namens „TopicNames“ definiert, das drei Elemente enthält. Jedes Element besteht aus einem Name-Wert-Paar.
  2. Das Array von TopicsNames wird dann einer Mitgliedsvariablen namens „topics“ hinzugefügt und an unser Scope-Objekt angehängt.
  3. Wir verwenden die HTML-Tags von (Ungeordnete Liste) und (Listenelement), um die Liste der Elemente in unserem Array anzuzeigen. Anschließend verwenden wir die Direktive ng-repeat, um jedes einzelne Element in unserem Array durchzugehen. Das Wort „tpname“ ist eine Variable, die verwendet wird, um auf jedes Element im Array topic.TopicNames zu verweisen.
  4. Hier zeigen wir den Wert jedes Array-Elements an.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen. Es werden alle Elemente des Arrays (im Grunde die TopicNames in Topics) angezeigt.

Ausgang:

ng-repeat-Direktive in AngularJS

AngularJS Mehrere Controller

Ein Beispiel für einen erweiterten Controller wäre das Konzept, mehrere Controller in einer eckigen JS-Anwendung zu haben.

Möglicherweise möchten Sie mehrere Controller definieren, um verschiedene Geschäftslogikfunktionen zu trennen. Zuvor haben wir erwähnt, dass es in einem Controller verschiedene Methoden gibt, bei denen eine Methode über separate Funktionen zum Addieren und Subtrahieren von Zahlen verfügt. Nun, Sie können mehrere Controller verwenden, um eine erweiterte Logiktrennung zu erreichen. Sie können beispielsweise einen Controller haben, der nur Operationen mit Zahlen ausführt, und einen anderen, der Operationen mit Strings ausführt.

Schauen wir uns ein Beispiel an, wie wir mehrere Controller in einer Angular.JS-Anwendung definieren können.

AngularJS Mehrere Controller

<!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-Erklärung:

  1. Hier definieren wir zwei Controller namens „firstController“ und „secondController“. Für jeden Controller fügen wir außerdem Code zur Verarbeitung hinzu. In unserem firstController fügen wir eine Variable namens „pname“ an, die den Wert „firstController“ hat, und im zweiten Controller fügen wir eine Variable namens „lname“ an, die den Wert „secondController“ hat.
  2. In der Ansicht greifen wir auf beide Controller zu und verwenden die Mitgliedsvariable des zweiten Controllers.

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen. Sie sehen wie erwartet den gesamten Text von „secondController“.

Ausgang:

AngularJS Mehrere Controller

Zusammenfassung

  • Die ng-repeat-Direktive in AngularJS wird verwendet, um mehrere sich wiederholende Elemente anzuzeigen.
  • Wir haben uns auch einen erweiterten Controller angesehen, der sich mit der Definition mehrerer Controller in einer Anwendung befasst.