AngularJS ng-repeat-Direktive mit Beispiel
James Hartmann
ng-repeat-Direktive in AngularJS
Die 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:
<!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:
- 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.
- Das Array von TopicsNames wird dann einer Mitgliedsvariablen namens „topics“ hinzugefügt und an unser Scope-Objekt angehängt.
- 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.
- Hier zeigen wir den Wert jedes Array-Elements an.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen. Sie sehen alle Elemente des Arrays (im Wesentlichen die TopicNames in Themen) angezeigt.
Ausgang:
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. Wir haben bereits erwähnt, dass ein Controller verschiedene Methoden hat, wobei eine Methode separate Funktionen für die Addition und Subtraktion von Zahlen hat. Sie können mehrere Controller haben, um eine erweiterte Trennung der Logik zu erreichen. Sie können beispielsweise einen Controller haben, der nur Operationen mit Zahlen durchführt, und einen anderen, der Operationen mit Zeichenfolgen durchführt.
Schauen wir uns ein Beispiel an, wie wir mehrere Controller in einer Angular.JS-Anwendung definieren können.
<!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:
- 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.
- In der Ansicht greifen wir auf beide Controller zu und verwenden die Mitgliedsvariable des zweiten Controllers.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen. Sie sehen wie erwartet den gesamten Text von „secondController“.
Ausgang:
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.
