AngularJS’de ng-repeat Direktifi İle Döngü Oluşturma

Merhaba,

Her programlama dilinde olduğu gibi JavaScript dilinde de tekrarlı faatliyetleri sağlayacak döngü yapıları bulunmaktadır. Ee haliyle JavaScript temelli olan AngularJS frameworkünde de beklenen bu döngü işlemini de ng-repeat direktifiyle gerçekleştiriyor olacağız.

ng-repeat; C#, Java vs. gibi dillerdeki foreach döngüsüne benzer işlevsellikte çalışmaktadır.
Prototipi aşağıdaki gibidir.

 ng-repeat="[Model] in [Veri Listesi]"

Aşağıda ng-repeat direktifine örnek bir çalışma yapılmıştır.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        var OgrenciUygulamasi = angular.module("OgrenciUygulamasi", []).controller("OgrenciController", function ($scope) {
            var Ogrenciler =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", OgrenciNo: 1 },
                    { Adi: "Mehmet", SoyAdi: "Aslıbay", OgrenciNo: 2 },
                    { Adi: "Necati", SoyAdi: "Gültepe", OgrenciNo: 3 },
                    { Adi: "Hilmi", SoyAdi: "Celayir", OgrenciNo: 4 },
                    { Adi: "Cansu", SoyAdi: "Yavuz", OgrenciNo: 5 }
                ];
            $scope.Ogrenciler = Ogrenciler;
        });
    </script>
</head>
<body ng-app="OgrenciUygulamasi" ng-controller="OgrenciController">
    <div ng-repeat="ogrenci in Ogrenciler">
        {{ogrenci.Adi + " " + ogrenci.SoyAdi + " " + ogrenci.OgrenciNo}}
    </div>
</body>
</html>

AngularJS’de İç İçe Döngü

Bu işlem için aşağıdaki örnekleri inceleyebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        var OgrenciUygulamasi = angular.module("OgrenciUygulamasi", []).controller("OgrenciController", function ($scope) {
            var Ogrenciler =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", OgrenciNo: 1 },
                    { Adi: "Mehmet", SoyAdi: "Aslıbay", OgrenciNo: 2 },
                    { Adi: "Necati", SoyAdi: "Gültepe", OgrenciNo: 3 },
                    { Adi: "Hilmi", SoyAdi: "Celayir", OgrenciNo: 4 },
                    { Adi: "Cansu", SoyAdi: "Yavuz", OgrenciNo: 5 }
                ];
            var Dersler =
                [
                    "Matematik", "Tarih", "Coğrafya", "Kimya", "Fizik"
                ];
            $scope.Ogrenciler = Ogrenciler;
            $scope.Dersler = Dersler;
        });
    </script>
</head>
<body ng-app="OgrenciUygulamasi" ng-controller="OgrenciController">
    <div ng-repeat="ogrenci in Ogrenciler">
        {{ogrenci.Adi + " " + ogrenci.SoyAdi + " " + ogrenci.OgrenciNo}}
        <br />
        <span ng-repeat="ders in Dersler">{{ders}},</span>
    </div>
</body>
</html>

Bir diğer örneğimiz;

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        var OgrenciUygulamasi = angular.module("OgrenciUygulamasi", []).controller("OgrenciController", function ($scope) {
            var Ogrenciler =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", OgrenciNo: 1, Dersler: ["Matematik", "Fizik", "Kimya"] },
                    { Adi: "Mehmet", SoyAdi: "Aslıbay", OgrenciNo: 2, Dersler: ["Matematik", "Fizik"] },
                    { Adi: "Necati", SoyAdi: "Gültepe", OgrenciNo: 3, Dersler: ["Matematik", "Kimya"] },
                    { Adi: "Hilmi", SoyAdi: "Celayir", OgrenciNo: 4, Dersler: ["Matematik", "Biyoloji", "Kimya"] },
                    { Adi: "Cansu", SoyAdi: "Yavuz", OgrenciNo: 5, Dersler: ["Matematik"] }
                ];
            $scope.Ogrenciler = Ogrenciler;
        });
    </script>
</head>
<body ng-app="OgrenciUygulamasi" ng-controller="OgrenciController">
    <div ng-repeat="ogrenci in Ogrenciler">
        {{ogrenci.Adi + " " + ogrenci.SoyAdi + " " + ogrenci.OgrenciNo}}
        <br />
        <span ng-repeat="ders in ogrenci.Dersler">{{ders}},</span>
    </div>
</body>
</html>

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…