AngularJS ng-repeat-Direktive mit Beispiel
James Hartmann
ng-repeat-Direktive in AngularJS
Das 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 Erlรคuterung:
- 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 enthalten kann, wobei eine Methode die Funktionalitรคt fรผr Addition und Subtraktion separat handhabt.tracDie Verarbeitung von Zahlen kann durch mehrere Controller erfolgen, um eine komplexere Trennung der Logik zu erreichen. Beispielsweise kann ein Controller ausschlieรlich Operationen mit Zahlen durchfรผhren, wรคhrend ein anderer Operationen mit Zeichenketten ausfรผ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 Erlรคuterung:
- 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.
