Direktiva AngularJS ng-repeat s příkladem
James Hartman
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>
Code Vysvětlení:
- 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 kontrolerů pro oddělení různých funkcí obchodní logiky. Dříve jsme zmínili o existenci různých metod v kontroleru, kde jedna metoda má samostatnou funkcionalitu pro sčítání a odčítání.tracfungování čísel. Můžete mít více řadičů, abyste dosáhli pokročilejšího oddělení logiky. Například můžete mít jeden řadič, 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>
Code Vysvětlení:
- 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.
