Directiva AngularJS ng-repeat cu exemplu
James Hartman
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:
<!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 Explicaลฃie:
- ร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.
- Matricea de TopicsNames este apoi adฤugatฤ la o variabilฤ membru numitฤ โsubiecteโ ศi ataศatฤ obiectului nostru de aplicare.
- 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.
- ร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:
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 controllere pentru a separa diferite funcศii logice de business. Anterior am menศionat despre existenศa diferitelor metode รฎntr-un controller, รฎn care o metodฤ avea funcศionalitฤศi separate pentru adunare ศi subdivizare.tracศiune de numere. 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 efectueazฤ doar operaศiuni pe numere ศi celฤlalt care efectueazฤ operaศiuni pe ศiruri de caractere.
Sฤ ne uitฤm la un exemplu despre cum putem defini mai multe controlere รฎntr-o aplicaศie 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 Explicaลฃie:
- 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โ.
- ร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:
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.
