Direktiva AngularJS ng-repeat s příkladem

ng-repeat směrnice v AngularJS

Jedno ng-opakovat direktiva v AngularJS se používá k zobrazení opakujících se hodnot definovaných v kontroléru. Někdy požadujeme zobrazení seznamu položek v pohledu. Direktiva ng-repeat nám pomáhá zobrazit seznam položek definovaných v kontroleru na prohlížecí stránce.

Příklad směrnice AngularJS ng-repeat

Podívejme se na příklad direktivy ng-repeat v 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>

Vysvětlení kódu:

V ovladači nejprve definujeme pole položek seznamu, které chceme definovat v pohledu. Zde jsme definovali pole nazvané „TopicNames“, které obsahuje tři položky. Každá položka se skládá z dvojice název-hodnota.
Pole TopicsNames je poté přidáno do členské proměnné nazvané „topics“ a připojeno k našemu objektu scope.
Používáme HTML tagy (Neuspořádaný seznam) a (Položka seznamu) pro zobrazení seznamu položek v našem poli. Poté použijeme direktivu ng-repeat pro procházení každé jednotlivé položky v našem poli. Slovo „tpname“ je proměnná, která se používá k označení každé položky v poli topics.TopicNames.
V tomto zobrazíme hodnotu každé položky pole.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup. Zobrazí se všechny položky pole (v podstatě názvy témat v tématech).

Výstup:

Vícenásobné ovladače AngularJS

Pokročilým příkladem řadiče by byl koncept více řadičů v úhlové JS aplikaci.

Možná budete chtít definovat více řadičů pro oddělení různých funkcí obchodní logiky. Dříve jsme se zmínili o tom, že máme různé metody v ovladači, kde jedna metoda měla samostatnou funkci pro sčítání a odčítání čísel. Můžete mít více ovladačů, abyste měli pokročilejší oddělení logiky. Například můžete mít jeden kontrolér, který provádí pouze operace s čísly, a druhý, který provádí operace s řetězci.

Podívejme se na příklad, jak můžeme definovat více ovladačů v aplikaci 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>

Vysvětlení kódu:

Zde definujeme 2 ovladače nazvané „firstController“ a „secondController“. Ke každému ovladači také přidáváme nějaký kód pro zpracování. V našem firstController připojíme proměnnou nazvanou „pname“, která má hodnotu „firstController“, a v druhém Controller připojíme proměnnou s názvem „lname“, která má hodnotu „secondController“.
V pohledu přistupujeme k oběma kontrolérům a používáme členskou proměnnou z druhého kontroléru.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup. Uvidíte veškerý text „secondController“ podle očekávání.

Výstup:

Shrnutí

Direktiva ng-repeat v AngularJS se používá k zobrazení více opakujících se položek.
Také jsme se podívali na pokročilý ovladač, který se zabýval definicí více ovladačů v aplikaci.

Máš rád: