AngularJS ng-repeat direktíva példával

By: James Hartman James Hartman
Hours korszerűsített

ng-repeat direktíva az AngularJS-ben

A ng-ismétlés Az AngularJS direktívája a vezérlőben meghatározott ismétlődő értékek megjelenítésére szolgál. Néha megköveteljük az elemek listájának megjelenítését a nézetben. Az ng-repeat direktíva segít nekünk megjeleníteni a vezérlőben meghatározott elemek listáját egy nézetoldalon.

AngularJS ng-repeat direktíva Példa

Nézzünk egy példát az ng-repeat direktívára az AngularJS-ben:

ng-repeat direktíva az AngularJS-ben

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

Kód magyarázata:

  1. A vezérlőben először definiáljuk a listaelemek tömbjét, amelyet a nézetben szeretnénk definiálni. Itt definiáltunk egy „TopicNames” nevű tömböt, amely három elemet tartalmaz. Minden elem egy név-érték párból áll.
  2. A TopicsNames tömb ezután hozzáadódik a „topics” nevű tagváltozóhoz, és hozzá van csatolva a hatókör objektumunkhoz.
  3. HTML címkéit használjuk (Rendezett lista) és (Listaelem) a tömbünk elemeinek listájának megjelenítéséhez. Ezután az ng-repeat direktívát használjuk a tömbünk minden egyes elemének végighaladásához. A „tpname” szó egy olyan változó, amely a tömb topics.TopicNames egyes elemeire mutat.
  4. Ebben az egyes tömbelemek értékét fogjuk megjeleníteni.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben. Megjelenik a tömb összes eleme (alapvetően a TopicNames a témákban).

output:

ng-repeat direktíva az AngularJS-ben

AngularJS több vezérlő

Egy fejlett vezérlőre példa az a koncepció, hogy több vezérlő van egy szögletes JS-alkalmazásban.

Érdemes több vezérlőt megadni a különböző üzleti logikai funkciók elkülönítéséhez. Korábban már említettük, hogy egy vezérlőben különböző módszerek vannak, amelyekben az egyik metódus külön funkcióval rendelkezik a számok összeadására és kivonására. Nos, több vezérlővel is rendelkezhet a logika fejlettebb szétválasztása érdekében. Például rendelkezhet az egyik vezérlővel, amely csak a számokkal, a másik pedig a karakterláncokkal végez műveleteket.

Nézzünk egy példát arra, hogyan definiálhatunk több vezérlőt egy angular.JS alkalmazásban.

AngularJS több vezérlő

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

Kód magyarázata:

  1. Itt definiálunk 2 vezérlőt, az úgynevezett „firstController” és „secondController”. Minden vezérlőhöz hozzáadunk egy kódot a feldolgozáshoz. Az első Controllerben csatolunk egy „pname” nevű változót, amelynek értéke „firstController”, a második Controllerben pedig egy „lname” nevű változót, amelynek értéke „secondController”.
  2. A nézetben mindkét vezérlőhöz hozzáférünk, és a második vezérlő tagváltozóját használjuk.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben. A várakozásoknak megfelelően látni fogja a „secondController” összes szövegét.

output:

AngularJS több vezérlő

Összegzésként

  • Az ng-repeat direktíva be AngularJS több ismétlődő elem megjelenítésére szolgál.
  • Megnéztünk egy fejlett vezérlőt is, amely több vezérlő definícióját vizsgálta egy alkalmazásban.

Talán tetszene: