AngularJS ng-repeat direktiiv koos näitega
James Hartman
ng-repeat direktiiv AngularJS-is
. ng-korda AngularJS-i direktiivi kasutatakse kontrolleris määratletud korduvate väärtuste kuvamiseks. Mõnikord nõuame vaates üksuste loendi kuvamist. Direktiiv ng-repeat aitab meil kuvada kuvalehel kontrolleris määratletud üksuste loendit.
AngularJS ng-repeat direktiivi näide
Vaatame näidet ng-repeat direktiivist AngularJS-is:
<!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>
Koodi selgitus:
- Esmalt määratleme kontrolleris loendiüksuste massiivi, mida tahame vaates määratleda. Siin oleme määratlenud massiivi nimega "TopicNames", mis sisaldab kolme üksust. Iga üksus koosneb nime-väärtuse paarist.
- Teemade nimede massiiv lisatakse seejärel liikmemuutujale nimega "topics" ja lisatakse meie ulatuse objektile.
- Me kasutame HTML-i silte (Järjestamata nimekiri) ja (Loendiüksus), et kuvada meie massiivi üksuste loend. Seejärel kasutame iga massiivi üksuse läbimiseks ng-repeat direktiivi. Sõna "tpname" on muutuja, mida kasutatakse massiivi teemade igale üksusele osutamiseks. Teemanimed.
- Selles kuvame iga massiivi elemendi väärtuse.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund. Näete kõiki massiivi üksusi (põhimõtteliselt teemade nimesid teemades).
Väljund:
AngularJS mitu kontrollerit
Täiustatud kontrolleri näide oleks mitme kontrolleri kontseptsioon nurgelises JS-i rakenduses.
Võimalik, et soovite määratleda mitu kontrollerit, et eraldada erinevad äriloogika funktsioonid. Varem mainisime erinevate meetodite olemasolu kontrolleris, kus ühel meetodil oli arvude liitmiseks ja lahutamiseks eraldi funktsionaalsus. Loogika täpsemaks eraldamiseks võib teil olla mitu kontrollerit. Näiteks võib teil olla üks kontroller, mis teeb toiminguid ainult numbritega ja teine, mis teeb toiminguid stringidega.
Vaatame näidet, kuidas saame nurk.JS rakenduses defineerida mitu kontrollerit.
<!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>
Koodi selgitus:
- Siin määratleme 2 kontrollerit, mida nimetatakse "firstController" ja "secondController". Iga kontrolleri jaoks lisame töötlemiseks ka teatud koodi. Meie esimeses Controlleris lisame muutuja nimega "pname", mille väärtus on "firstController", ja teise Controlleri jaoks lisame muutuja nimega "lname", mille väärtus on "secondController".
- Vaates pääseme juurde mõlemale kontrollerile ja kasutame teise kontrolleri liikme muutujat.
Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund. Näete ootuspäraselt kogu „secondControlleri” teksti.
Väljund:
kokkuvõte
- ng-repeat direktiiv sisse AngularJS kasutatakse mitme korduva üksuse kuvamiseks.
- Vaatasime ka täiustatud kontrollerit, mis vaatles rakenduses mitme kontrolleri määratlust.
