Örnekle AngularJS ng-tekrar Direktifi

AngularJS'de ng-repeat Yönergesi

The ng-tekrar AngularJS'deki yönerge, denetleyicide tanımlanan yinelenen değerleri görüntülemek için kullanılır. Bazen görünümde bir öğe listesinin görüntülenmesini isteriz. Ng-repeat yönergesi, denetleyicide tanımlanan öğelerin listesini bir görünüm sayfasında görüntülememize yardımcı olur.

AngularJS ng-tekrar Direktifi Örneği

AngularJS'deki ng-repeat direktifinin bir örneğine bakalım:

AngularJS'de ng-repeat Yönergesi

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

Kod Açıklaması:

  1. Controller'da öncelikle view'da tanımlamak istediğimiz liste öğeleri dizimizi tanımlarız. Burada “Konu Adları” adında üç öğe içeren bir dizi tanımladık. Her öğe bir ad-değer çiftinden oluşur.
  2. TopicsNames dizisi daha sonra "topics" adı verilen üye değişkenine eklenir ve kapsam nesnemize eklenir.
  3. HTML etiketlerini kullanıyoruz (Sırasız Liste) ve (Liste Öğesi) dizimizdeki öğelerin listesini görüntülemek için. Daha sonra dizimizdeki her bir öğenin üzerinden geçmek için ng-repeat yönergesini kullanırız. “tpname” kelimesi, Subjects.TopicNames dizisindeki her bir öğeyi işaret etmek için kullanılan bir değişkendir.
  4. Burada her dizi öğesinin değerini görüntüleyeceğiz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir. Dizinin tüm öğelerini (Temel olarak topics içindeki TopicNames) görüntülendiğini göreceksiniz.

Çıktı:

AngularJS'de ng-repeat Yönergesi

AngularJS Çoklu Denetleyiciler

Gelişmiş bir denetleyici örneği, açısal bir JS uygulamasında birden fazla denetleyiciye sahip olma kavramı olabilir.

Farklı iş mantığı işlevlerini ayırmak için birden fazla denetleyici tanımlamak isteyebilirsiniz. Daha önce bir kontrolörde farklı yöntemlerin olduğundan bahsetmiştik; burada bir yöntem sayıların toplanması ve çıkarılması için ayrı işlevselliğe sahipti. Daha gelişmiş bir mantık ayrımına sahip olmak için birden fazla denetleyiciye sahip olabilirsiniz. Örneğin, yalnızca sayılar üzerinde işlemler yapan bir denetleyiciye, dizeler üzerinde işlemler yapan diğerine ise sahip olabilirsiniz.

Bir angular.JS uygulamasında birden fazla denetleyiciyi nasıl tanımlayabileceğimize dair bir örneğe bakalım.

AngularJS Çoklu Denetleyiciler

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

Kod Açıklaması:

  1. Burada “firstController” ve “secondController” adında 2 adet kontrolcü tanımlıyoruz. Her denetleyici için işleme yönelik bazı kodlar da ekliyoruz. FirstController’ımıza “pname” adında “firstController” değerine sahip bir değişken, SecondController’a ise “lname” adında “secondController” değerine sahip bir değişken ekliyoruz.
  2. Görünümde, her iki denetleyiciye de erişiyoruz ve ikinci denetleyicinin üye değişkenini kullanıyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir. Beklendiği gibi “secondController”ın tüm metnini göreceksiniz.

Çıktı:

AngularJS Çoklu Denetleyiciler

ÖZET

  • Ng-repeat direktifi angularjs Birden çok yinelenen öğeyi görüntülemek için kullanılır.
  • Ayrıca bir uygulamadaki birden fazla denetleyicinin tanımını inceleyen gelişmiş bir denetleyiciye de göz attık.