AngularJS ng-upprepa direktiv med exempel
James Hartman
ng-repetera direktivet i AngularJS
Smakämnen ng-upprepa direktiv i AngularJS används för att visa upprepade värden definierade i styrenheten. Ibland kräver vi att vi visar en lista med objekt i vyn. Direktivet ng-repeat hjälper oss att visa en lista över objekt definierade i styrenheten på en vysida.
AngularJS ng-repeat direktiv Exempel
Låt oss titta på ett exempel 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>
Kodförklaring:
- I styrenheten definierar vi först vår array av listobjekt som vi vill definiera i vyn. Här borta har vi definierat en array som heter "Ämnesnamn" som innehåller tre objekt. Varje objekt består av ett namn-värde-par.
- Arrayen av TopicsNames läggs sedan till i en medlemsvariabel som kallas "topics" och kopplas till vårt scope-objekt.
- Vi använder HTML-taggar för (Oordnad lista) och (List Item) för att visa listan över objekt i vår array. Vi använder sedan direktivet ng-repeat för att gå igenom varje objekt i vår array. Ordet "tpname" är en variabel som används för att peka på varje objekt i arrayen topics.TopicNames.
- I detta kommer vi att visa värdet för varje arrayobjekt.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren. Du kommer att se alla objekt i arrayen (i grund och botten ämnesnamnen i ämnen) visas.
Produktion:
AngularJS Multiple Controllers
Ett exempel på avancerat styrenhet skulle vara konceptet att ha flera styrenheter i en vinkel JS-applikation.
Du kanske vill definiera flera kontroller för att separera olika affärslogikfunktioner. Vi nämnde tidigare om att ha olika metoder i en styrenhet där en metod hade separat funktionalitet för addition och subtraktion av tal. Tja, du kan ha flera kontroller för att få en mer avancerad separation av logik. Till exempel kan du ha en kontroller som bara gör operationer på siffror och den andra som gör operationer på strängar.
Låt oss titta på ett exempel på hur vi kan definiera flera kontroller i en angular.JS-applikation.
<!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>
Kodförklaring:
- Här definierar vi 2 kontroller som kallas "firstController" och "secondController". För varje styrenhet lägger vi också till en del kod för bearbetning. I vår firstController , bifogar vi en variabel som heter "pname" som har värdet "firstController", och i secondController bifogar vi en variabel som heter "lname" som har värdet "secondController".
- I vyn kommer vi åt båda kontrollerna och använder medlemsvariabeln från den andra kontrollern.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren. Du kommer att se all text från "secondController" som förväntat.
Produktion:
Sammanfattning
- ng-repeteringsdirektivet i AngularJS används för att visa flera upprepade objekt.
- Vi tittade också på en avancerad styrenhet som tittade på definitionen av flera styrenheter i en applikation.
