AngularJS ng-gjenta direktiv med eksempel
James Hartman
ng-repetisjonsdirektiv i AngularJS
Ocuco ng-gjenta direktiv i AngularJS brukes til å vise gjentatte verdier definert i kontrolleren. Noen ganger krever vi å vise en liste over elementer i visningen. ng-repeat-direktivet hjelper oss å vise en liste over elementer definert i kontrolleren til en visningsside.
AngularJS ng-repetisjonsdirektiv eksempel
La oss se et eksempel på ng-repeat-direktivet i 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>
Kodeforklaring:
- I kontrolleren definerer vi først vårt utvalg av listeelementer som vi ønsker å definere i visningen. Her har vi definert en matrise kalt "Temanavn" som inneholder tre elementer. Hvert element består av et navn-verdi-par.
- Matrisen av emnenavn blir deretter lagt til en medlemsvariabel kalt "emner" og knyttet til scope-objektet vårt.
- Vi bruker HTML-taggene til (Uordnet liste) og (Listeelement) for å vise listen over elementer i matrisen vår. Vi bruker deretter ng-repeat-direktivet for å gå gjennom hvert eneste element i matrisen vår. Ordet "tpname" er en variabel som brukes til å peke på hvert element i matrisen topics.TopicNames.
- I dette vil vi vise verdien av hvert matriseelement.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren. Du vil se alle elementene i matrisen (I utgangspunktet emnenavnene i emner) vist.
Utgang:
AngularJS flere kontroller
Et eksempel på avansert kontroller vil være konseptet med å ha flere kontrollere i en vinkel JS-applikasjon.
Du vil kanskje definere flere kontrollere for å skille forskjellige forretningslogikkfunksjoner. Tidligere nevnte vi om å ha forskjellige metoder i en kontroller der en metode hadde separat funksjonalitet for addisjon og subtraksjon av tall. Vel, du kan ha flere kontrollere for å ha en mer avansert separasjon av logikk. For eksempel kan du ha en kontroller som bare gjør operasjoner på tall og den andre som gjør operasjoner på strenger.
La oss se på et eksempel på hvordan vi kan definere flere kontrollere i en angular.JS-applikasjon.
<!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>
Kodeforklaring:
- Her definerer vi 2 kontrollere kalt "firstController" og "secondController". For hver kontroller legger vi også til noe kode for behandling. I vår firstController legger vi ved en variabel kalt "pname" som har verdien "firstController", og i den andreController legger vi ved en variabel kalt "lname" som har verdien "secondController".
- I visningen har vi tilgang til begge kontrollerene og bruker medlemsvariabelen fra den andre kontrolleren.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren. Du vil se all teksten til "secondController" som forventet.
Utgang:
Sammendrag
- ng-repetisjonsdirektivet i AngularJS brukes til å vise flere gjentatte elementer.
- Vi tok også en titt på en avansert kontroller som så på definisjonen av flere kontrollere i en applikasjon.
