AngularJS ng-repeat -direktiivi esimerkin kanssa

ng-repeat-direktiivi AngularJS:ssä

- ng-toista AngularJS-direktiiviä käytetään näyttämään toistuvia arvoja, jotka on määritetty ohjaimessa. Joskus joudumme näyttämään luettelon kohteista näkymässä. ng-repeat-käsky auttaa meitä näyttämään luettelon ohjaimessa määritellyistä kohteista katselusivulle.

Esimerkki AngularJS ng-repeat -direktiivistä

Katsotaanpa esimerkkiä ng-repeat-direktiivistä AngularJS:ssä:

<!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>

Koodin selitys:

Ohjaimessa määritämme ensin luettelon kohteiden joukkomme, jotka haluamme määrittää näkymässä. Täällä olemme määrittäneet taulukon nimeltä "TopicNames", joka sisältää kolme kohdetta. Jokainen kohde koostuu nimi-arvo-parista.
TopicsNames-joukko lisätään sitten jäsenmuuttujaan nimeltä "topics" ja liitetään laajuusobjektiin.
Käytämme HTML-tageja (järjestämätön lista) ja (Luettelokohde) näyttääksesi luettelon kohteistamme. Käytämme sitten ng-repeat-direktiiviä käydäksemme läpi jokaisen taulukon kohteen. Sana "tpname" on muuttuja, jota käytetään osoittamaan jokaiseen kohtaan taulukon topics.TopicNames.
Tässä näytämme kunkin taulukon kohteen arvon.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa. Näet kaikki taulukon kohteet (Periaatteessa aiheiden nimet) näytöllä.

lähtö:

AngularJS useita ohjaimia

Edistynyt ohjainesimerkki olisi ajatus siitä, että kulmikkaassa JS-sovelluksessa on useita ohjaimia.

Haluat ehkä määrittää useita ohjaimia erilaisten liiketoimintalogiikkatoimintojen erottamiseksi. Aiemmin mainittiin eri menetelmien käyttämisestä ohjaimessa, jossa yhdellä menetelmällä oli erillinen toiminto lukujen yhteen- ja vähennyslaskua varten. No, sinulla voi olla useita ohjaimia, jotta voit erottaa logiikan edistyneemmältä. Sinulla voi esimerkiksi olla yksi ohjain, joka toimii vain numeroiden kanssa ja toinen, joka toimii merkkijonoilla.

Katsotaanpa esimerkkiä siitä, kuinka voimme määrittää useita ohjaimia angular.JS-sovelluksessa.

<!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>

Koodin selitys:

Tässä määrittelemme 2 ohjainta nimeltä "firstController" ja "secondController". Jokaiselle ohjaimelle lisäämme myös koodin käsittelyä varten. Ensimmäisessä ohjaimessa liitämme muuttujan nimeltä "pname", jonka arvo on "firstController", ja toisessa ohjaimessa liitämme muuttujan nimeltä "lname", jonka arvo on "secondController".
Näkymässä käytämme molempia ohjaimia ja käytämme jäsenmuuttujaa toisesta ohjaimesta.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa. Näet kaiken tekstin "secondController" odotetusti.

lähtö:

Yhteenveto

ng-repeat -direktiivi sisään angularjs käytetään näyttämään useita toistuvia kohteita.
Tarkastelimme myös edistynyttä ohjainta, joka tarkasteli useiden ohjaimien määritelmää sovelluksessa.

Saatat tykätä: