Οδηγία AngularJS ng-repeat με Παράδειγμα

ng-repeat Directive στο AngularJS

Τα Διαχωριστικά ng-επανάληψη οδηγία στο AngularJS χρησιμοποιείται για την εμφάνιση επαναλαμβανόμενων τιμών που ορίζονται στον ελεγκτή. Μερικές φορές απαιτείται η εμφάνιση μιας λίστας στοιχείων στην προβολή. Η οδηγία ng-repeat μας βοηθά να εμφανίσουμε μια λίστα στοιχείων που ορίζονται στον ελεγκτή σε μια σελίδα προβολής.

Παράδειγμα οδηγίας AngularJS ng-repeat

Ας δούμε ένα παράδειγμα της οδηγίας ng-repeat στο 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>

Επεξήγηση κώδικα:

Στον ελεγκτή, ορίζουμε πρώτα τον πίνακα στοιχείων λίστας που θέλουμε να ορίσουμε στην προβολή. Εδώ έχουμε ορίσει έναν πίνακα που ονομάζεται "Όνομα θεμάτων" που περιέχει τρία στοιχεία. Κάθε στοιχείο αποτελείται από ένα ζεύγος ονόματος-τιμής.
Στη συνέχεια, ο πίνακας TopicsNames προστίθεται σε μια μεταβλητή μέλους που ονομάζεται "topics" και προσαρτάται στο αντικείμενο εμβέλειάς μας.
Χρησιμοποιούμε τις ετικέτες HTML του (Μη ταξινομημένη λίστα) και (Στοιχείο λίστας) για να εμφανίσουμε τη λίστα των στοιχείων στον πίνακα μας. Στη συνέχεια χρησιμοποιούμε την οδηγία ng-repeat για να διαβάσουμε κάθε στοιχείο στον πίνακα μας. Η λέξη "tpname" είναι μια μεταβλητή που χρησιμοποιείται για να δείχνει σε κάθε στοιχείο στα θέματα του πίνακα.Όνομα θεμάτων.
Σε αυτό, θα εμφανίσουμε την τιμή κάθε στοιχείου πίνακα.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης. Θα δείτε όλα τα στοιχεία του πίνακα (Βασικά τα Ονόματα Θεμάτων σε θέματα) να εμφανίζονται.

Παραγωγή:

Πολλαπλοί ελεγκτές AngularJS

Ένα προηγμένο παράδειγμα ελεγκτή θα ήταν η έννοια της ύπαρξης πολλαπλών ελεγκτών σε μια γωνιακή εφαρμογή JS.

Ίσως θελήσετε να ορίσετε πολλούς ελεγκτές για να διαχωρίσετε διαφορετικές λειτουργίες επιχειρηματικής λογικής. Προηγουμένως αναφέραμε ότι υπάρχουν διαφορετικές μέθοδοι σε έναν ελεγκτή όπου μια μέθοδος είχε ξεχωριστή λειτουργικότητα για πρόσθεση και αφαίρεση αριθμών. Λοιπόν, μπορείτε να έχετε πολλούς ελεγκτές για να έχετε έναν πιο προηγμένο διαχωρισμό της λογικής. Για παράδειγμα, μπορείτε να έχετε έναν ελεγκτή που κάνει απλώς πράξεις σε αριθμούς και ο άλλος που κάνει πράξεις σε συμβολοσειρές.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να ορίσουμε πολλούς ελεγκτές σε μια εφαρμογή angular.JS.

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

Επεξήγηση κώδικα:

Εδώ ορίζουμε 2 ελεγκτές που ονομάζονται "firstController" και "secondController". Για κάθε ελεγκτή προσθέτουμε επίσης κάποιο κώδικα για επεξεργασία. Στο firstController μας, επισυνάπτουμε μια μεταβλητή που ονομάζεται "pname" που έχει την τιμή "firstController", και στον secondController επισυνάπτουμε μια μεταβλητή που ονομάζεται "lname" που έχει την τιμή "secondController".
Στην προβολή, έχουμε πρόσβαση και στους δύο ελεγκτές και χρησιμοποιούμε τη μεταβλητή μέλους από τον δεύτερο ελεγκτή.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης. Θα δείτε όλο το κείμενο του "secondController" όπως αναμένεται.

Παραγωγή:

Σύνοψη

Η οδηγία ng-repeat in AngularJS χρησιμοποιείται για την εμφάνιση πολλαπλών επαναλαμβανόμενων στοιχείων.
Ρίξαμε επίσης μια ματιά σε έναν προηγμένο ελεγκτή που εξέτασε τον ορισμό των πολλαπλών ελεγκτών σε μια εφαρμογή.

Μπορεί να σας αρέσει: