Perşembe , 19 Ekim 2017
Anasayfa » JavaScript » AngularJS » AngularJS ng-repeat Yönergesi

AngularJS ng-repeat Yönergesi

Bu yazıda anlatacağım konu: ng-repeat direktifi olacaktır. JavaScript listesini HTML kısmında ng-repeat kullanarak listeleyeceğiz.

Konuyu maddelendirirsek

  • ng-repeat ifadeleri
  • iç içe ng-repeat ifadeleri 

olmak üzere iki maddede ele alınacaktır.

ng-repeat C# ,PHP  gibi dillerde bulunan foreach çalışma mantığı ile aynıdır.

Hadi bu bir örnekle anlamaya çalışalım. Personel adında ve dizi yapısında bir nesnemiz olduğunu düşünelim. Düşünmek yerine aşağıdaki gibi oluşturalım.

 

Yukarıda bir personeller adında bir dizi oluşturduk. Bu dizi her elemanında bir personel nesnesini tutmaktadır. Aslına bakacak olursak bu yapı veritabanından çekilmiş bir tablo da olabilirdi. İlerleyen yazılarımızda bunları da bulacaksınız.

Bu yapıyı ng-repeat ile çok kolay bir şekilde gösterebiliriz.

SCRIPT: Önce modül ve controller oluşturalım.  Sonra $scope içine dizimi yerleştirelim. Aşağıdaki kod bu işlemi gerçekleştirmektedir.

angular-ng-repeat

HTML : Görünümde tekrarlı olan ifadeleri göstermek için ng-repeat bildirimini kullanıyoruz demiştik. Burada personeller dizisindeki her bir personel için ng-repeat bildirimi dönecek ve personele alacaktır. Örnek kolay olması için personelleri bir tablonun içine yerleştirerek ekran listeleyeceğiz. İçinde div barındıran örneklerde kullanmak mümkün. Her satır bir personeli çekecek . İlgili satırdaki her hücre de personelin detaylarını gösterecektir.
Ng-repeat bildiriminin kullanımında dikkat edilmesi gereken “nesne in modeladi” şeklinde olmasıdır.
Modeladi $scope ile gelen dizimizi ifade etmektedir. Nesne ise döngü içinde her döndüğünde aktif olan dizi nesnesini göstermektedir.

 

SCRIPT & HTML 

 

AngularJS Örnek Uygulama

 

AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir