AngularJS ng-repeat Direktiva s primjerom
James Hartman
Direktiva ng-repeat u AngularJS
The ng-ponovi direktiva u AngularJS koristi se za prikaz ponavljajućih vrijednosti definiranih u kontroleru. Ponekad zahtijevamo prikaz popisa stavki u prikazu. Direktiva ng-repeat pomaže nam prikazati popis stavki definiranih u kontroleru na stranici za prikaz.
Primjer AngularJS ng-repeat direktive
Pogledajmo primjer direktive ng-repeat u 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>
Objašnjenje koda:
- U kontroleru prvo definiramo naš niz stavki popisa koje želimo definirati u pogledu. Ovdje smo definirali polje pod nazivom "Imena tema" koje sadrži tri stavke. Svaka stavka sastoji se od para naziv-vrijednost.
- Polje TopicsNames zatim se dodaje varijabli člana pod nazivom "topics" i pridružuje našem objektu opsega.
- Koristimo HTML oznake od (Nesređeni popis) i (List Item) za prikaz popisa stavki u našem nizu. Zatim koristimo direktivu ng-repeat za prolazak kroz svaku stavku u našem nizu. Riječ “tpname” je varijabla koja se koristi za ukazivanje na svaku stavku u polju topics.TopicNames.
- Ovdje ćemo prikazati vrijednost svake stavke niza.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku. Vidjet ćete prikazane sve stavke niza (u osnovi TopicNames u temama).
Izlaz:
AngularJS više kontrolera
Primjer naprednog kontrolera bio bi koncept postojanja više kontrolera u kutnoj JS aplikaciji.
Možda biste željeli definirati više kontrolera za odvajanje različitih funkcija poslovne logike. Ranije smo spomenuli postojanje različitih metoda u kontroleru u kojima je jedna metoda imala odvojenu funkcionalnost za zbrajanje i oduzimanje brojeva. Pa, možete imati više kontrolera da biste imali naprednije odvajanje logike. Na primjer, možete imati jedan kontroler koji radi samo operacije na brojevima, a drugi koji radi operacije na nizovima.
Pogledajmo primjer kako možemo definirati više kontrolera u angular.JS aplikaciji.
<!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>
Objašnjenje koda:
- Ovdje definiramo 2 kontrolera pod nazivom “firstController” i “secondController”. Za svaki kontroler također dodajemo neki kod za obradu. U našem firstControlleru prilažemo varijablu pod nazivom "pname" koja ima vrijednost "firstController", a u secondController prilažemo varijablu pod nazivom "lname" koja ima vrijednost "secondController".
- U prikazu pristupamo oba kontrolera i koristimo varijablu član iz drugog kontrolera.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku. Vidjet ćete sav tekst "secondController" kao što je očekivano.
Izlaz:
Rezime
- Direktiva ng-repeat u AngularJS koristi se za prikaz više stavki koje se ponavljaju.
- Također smo pogledali napredni kontroler koji je razmatrao definiciju više kontrolera u aplikaciji.
