Directiva AngularJS ng-repeat cu exemplu

Directiva ng-repeat în AngularJS

ng-repetă directiva din AngularJS este folosită pentru a afișa valori repetate definite în controler. Uneori avem nevoie de afișarea unei liste de elemente în vizualizare. Directiva ng-repeat ne ajută să afișăm o listă de elemente definite în controler într-o pagină de vizualizare.

Exemplu de directivă AngularJS ng-repeat

Să vedem un exemplu de directivă ng-repeat în AngularJS:

Directiva ng-repeat în 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>

Explicația codului:

  1. În controler, definim mai întâi matricea noastră de elemente din listă pe care dorim să le definim în vizualizare. Aici am definit o matrice numită „TopicNames” care conține trei elemente. Fiecare articol este format dintr-o pereche nume-valoare.
  2. Matricea de TopicsNames este apoi adăugată la o variabilă membru numită „subiecte” și atașată obiectului nostru de aplicare.
  3. Folosim etichetele HTML ale (Lista neordonată) și (List Item) pentru a afișa lista de articole din matricea noastră. Apoi folosim directiva ng-repeat pentru a parcurge fiecare element din matricea noastră. Cuvântul „tpname” este o variabilă care este folosită pentru a indica fiecare element din matricea topics.TopicNames.
  4. În aceasta, vom afișa valoarea fiecărui element de matrice.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser. Veți vedea afișate toate elementele matricei (în principiu, TopicNames din subiecte).

ieșire:

Directiva ng-repeat în AngularJS

Controlere multiple AngularJS

Un exemplu de controler avansat ar fi conceptul de a avea mai multe controlere într-o aplicație JS unghiulară.

Este posibil să doriți să definiți mai multe controlere pentru a separa diferite funcții logice de afaceri. Mai devreme am menționat despre existența unor metode diferite într-un controler în care o metodă avea funcționalități separate pentru adunarea și scăderea numerelor. Ei bine, puteți avea mai multe controlere pentru a avea o separare mai avansată a logicii. De exemplu, puteți avea un controler care face doar operațiuni pe numere și celălalt care face operațiuni pe șiruri.

Să ne uităm la un exemplu despre cum putem defini mai multe controlere într-o aplicație angular.JS.

Controlere multiple 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">
	<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>

Explicația codului:

  1. Aici definim 2 controlere numite „firstController” și „secondController”. Pentru fiecare controler adăugăm și un cod pentru procesare. În firstController , atașăm o variabilă numită „pname” care are valoarea „firstController”, iar în secondController atașăm o variabilă numită „lname” care are valoarea „secondController”.
  2. În vizualizare, accesăm ambele controlere și folosim variabila membru din al doilea controler.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser. Veți vedea tot textul „secondController” așa cum vă așteptați.

ieșire:

Controlere multiple AngularJS

Rezumat

  • Directiva ng-repeat în AngularJS este folosit pentru a afișa mai multe elemente care se repetă.
  • Ne-am uitat, de asemenea, la un controler avansat care a analizat definiția mai multor controlere într-o aplicație.