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.
|
1 2 3 4 5 6 7 8 9 10 |
var personeller=[ {isim:"Hayri",soyisim:"KARA",cinsiyet:"Erkek",maas:3000}, {isim:"Yaşar",soyisim:"DOĞAN",cinsiyet:"Erkek",maas:2500}, {isim:"İsmet",soyisim:"ULUÇ",cinsiyet:"Erkek",maas:2700}, {isim:"Ayşe",soyisim:"YURT",cinsiyet:"Kadın",maas:3500}, {isim:"Sunay",soyisim:"YERLİ",cinsiyet:"Kadın",maas:2850}, {isim:"Nazmiye",soyisim:"ÇARIKÇI",cinsiyet:"Kadın",maas:2000} ]; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ {isim:"Hayri",soyisim:"KARA",cinsiyet:"Erkek",maas:3000}, {isim:"Yaşar",soyisim:"DOĞAN",cinsiyet:"Erkek",maas:2500}, {isim:"İsmet",soyisim:"ULUÇ",cinsiyet:"Erkek",maas:2700}, {isim:"Ayşe",soyisim:"YURT",cinsiyet:"Kadın",maas:3500}, {isim:"Sunay",soyisim:"YERLİ",cinsiyet:"Kadın",maas:2850}, {isim:"Nazmiye",soyisim:"ÇARIKÇI",cinsiyet:"Kadın",maas:2000} ]; $scope.personeller = personeller; }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body ng-app="persModul"> <div ng-controller="persController"> <table> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>CİNSİYET</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"><!-- $scope.personeller ile gelen ifade--> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }}TL </td> </tr> </tbody> </table> </div> </body> |
SCRIPT & HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ {isim:"Hayri",soyisim:"KARA",cinsiyet:"Erkek",maas:3000}, {isim:"Yaşar",soyisim:"DOĞAN",cinsiyet:"Erkek",maas:2500}, {isim:"İsmet",soyisim:"ULUÇ",cinsiyet:"Erkek",maas:2700}, {isim:"Ayşe",soyisim:"YURT",cinsiyet:"Kadın",maas:3500}, {isim:"Sunay",soyisim:"YERLİ",cinsiyet:"Kadın",maas:2850}, {isim:"Nazmiye",soyisim:"ÇARIKÇI",cinsiyet:"Kadın",maas:2000} ]; $scope.personeller = personeller; }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <table> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>CİNSİYET</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"><!-- $scope.personeller ile gelen ifade--> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }}TL </td> </tr> </tbody> </table> </div> </body> </html> |
[…] HTML: ng-repeat ile verileri satır satır listelidik. ng-repeat’in ne olduğunu merak ediyorsanız, bu makaleyi okuyabilirsiniz. […]
[…] Hazırladığımız bileşenleri birden fazla sayfada kullanmak istediğimizde de aynı kodları tekrar tekrar yazmaktan bizi alıkoymuş olacaktır.(Güzel birşey ) Aslında burada yapılan da yazılmış olan kodları parçalamak ve programlamayı kolaylaştırmak. ng-include yönergesi için kullandığım kodlar ve model bu yazıdan alınmıştır. […]
[…] Konu 6: AngularJS ng-repeat Yönergesi […]