{"id":7047,"date":"2018-03-10T23:50:24","date_gmt":"2018-03-10T23:50:24","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=7047"},"modified":"2018-03-10T23:50:24","modified_gmt":"2018-03-10T23:50:24","slug":"angularjsde-ng-repeat-direktifi-ile-dongu-olusturma","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angularjsde-ng-repeat-direktifi-ile-dongu-olusturma\/","title":{"rendered":"AngularJS’de ng-repeat Direktifi \u0130le D\u00f6ng\u00fc Olu\u015fturma"},"content":{"rendered":"
<\/div>\n

Merhaba,<\/p>\n

Her programlama dilinde oldu\u011fu gibi JavaScript dilinde de tekrarl\u0131 faatliyetleri sa\u011flayacak d\u00f6ng\u00fc yap\u0131lar\u0131 bulunmaktad\u0131r. Ee haliyle JavaScript temelli olan AngularJS framework\u00fcnde de beklenen bu d\u00f6ng\u00fc i\u015flemini de ng-repeat direktifiyle ger\u00e7ekle\u015ftiriyor olaca\u011f\u0131z.<\/p>\n

ng-repeat; C#, Java vs. gibi dillerdeki foreach d\u00f6ng\u00fcs\u00fcne benzer i\u015flevsellikte \u00e7al\u0131\u015fmaktad\u0131r.
\nPrototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n

\r\n ng-repeat="[Model] in [Veri Listesi]"\r\n<\/pre>\n
A\u015fa\u011f\u0131da ng-repeat direktifine \u00f6rnek bir \u00e7al\u0131\u015fma yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n    <script>\r\n        var OgrenciUygulamasi = angular.module("OgrenciUygulamasi", []).controller("OgrenciController", function ($scope) {\r\n            var Ogrenciler =\r\n                [\r\n                    { Adi: "Gen\u00e7ay", SoyAdi: "Y\u0131ld\u0131z", OgrenciNo: 1 },\r\n                    { Adi: "Mehmet", SoyAdi: "Asl\u0131bay", OgrenciNo: 2 },\r\n                    { Adi: "Necati", SoyAdi: "G\u00fcltepe", OgrenciNo: 3 },\r\n                    { Adi: "Hilmi", SoyAdi: "Celayir", OgrenciNo: 4 },\r\n                    { Adi: "Cansu", SoyAdi: "Yavuz", OgrenciNo: 5 }\r\n                ];\r\n            $scope.Ogrenciler = Ogrenciler;\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body ng-app="OgrenciUygulamasi" ng-controller="OgrenciController">\r\n    <div ng-repeat="ogrenci in Ogrenciler">\r\n        {{ogrenci.Adi + " " + ogrenci.SoyAdi + " " + ogrenci.OgrenciNo}}\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
AngularJS’de \u0130\u00e7 \u0130\u00e7e D\u00f6ng\u00fc<\/h3>\n
Bu i\u015flem i\u00e7in a\u015fa\u011f\u0131daki \u00f6rnekleri inceleyebilirsiniz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n    <script>\r\n        var OgrenciUygulamasi = angular.module("OgrenciUygulamasi", []).controller("OgrenciController", function ($scope) {\r\n            var Ogrenciler =\r\n                [\r\n                    { Adi: "Gen\u00e7ay", SoyAdi: "Y\u0131ld\u0131z", OgrenciNo: 1 },\r\n                    { Adi: "Mehmet", SoyAdi: "Asl\u0131bay", OgrenciNo: 2 },\r\n                    { Adi: "Necati", SoyAdi: "G\u00fcltepe", OgrenciNo: 3 },\r\n                    { Adi: "Hilmi", SoyAdi: "Celayir", OgrenciNo: 4 },\r\n                    { Adi: "Cansu", SoyAdi: "Yavuz", OgrenciNo: 5 }\r\n                ];\r\n            var Dersler =\r\n                [\r\n                    "Matematik", "Tarih", "Co\u011frafya", "Kimya", "Fizik"\r\n                ];\r\n            $scope.Ogrenciler = Ogrenciler;\r\n            $scope.Dersler = Dersler;\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body ng-app="OgrenciUygulamasi" ng-controller="OgrenciController">\r\n    <div ng-repeat="ogrenci in Ogrenciler">\r\n        {{ogrenci.Adi + " " + ogrenci.SoyAdi + " " + ogrenci.OgrenciNo}}\r\n        <br \/>\r\n        <span ng-repeat="ders in Dersler">{{ders}},<\/span>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Bir di\u011fer \u00f6rne\u011fimiz;<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/angular.min.js"><\/script>\r\n    <script>\r\n        var OgrenciUygulamasi = angular.module("OgrenciUygulamasi", []).controller("OgrenciController", function ($scope) {\r\n            var Ogrenciler =\r\n                [\r\n                    { Adi: "Gen\u00e7ay", SoyAdi: "Y\u0131ld\u0131z", OgrenciNo: 1, Dersler: ["Matematik", "Fizik", "Kimya"] },\r\n                    { Adi: "Mehmet", SoyAdi: "Asl\u0131bay", OgrenciNo: 2, Dersler: ["Matematik", "Fizik"] },\r\n                    { Adi: "Necati", SoyAdi: "G\u00fcltepe", OgrenciNo: 3, Dersler: ["Matematik", "Kimya"] },\r\n                    { Adi: "Hilmi", SoyAdi: "Celayir", OgrenciNo: 4, Dersler: ["Matematik", "Biyoloji", "Kimya"] },\r\n                    { Adi: "Cansu", SoyAdi: "Yavuz", OgrenciNo: 5, Dersler: ["Matematik"] }\r\n                ];\r\n            $scope.Ogrenciler = Ogrenciler;\r\n        });\r\n    <\/script>\r\n<\/head>\r\n<body ng-app="OgrenciUygulamasi" ng-controller="OgrenciController">\r\n    <div ng-repeat="ogrenci in Ogrenciler">\r\n        {{ogrenci.Adi + " " + ogrenci.SoyAdi + " " + ogrenci.OgrenciNo}}\r\n        <br \/>\r\n        <span ng-repeat="ders in ogrenci.Dersler">{{ders}},<\/span>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Her programlama dilinde oldu\u011fu gibi JavaScript dilinde de tekrarl\u0131 faatliyetleri sa\u011flayacak d\u00f6ng\u00fc yap\u0131lar\u0131 bulunmaktad\u0131r. Ee haliyle JavaScript temelli olan AngularJS framework\u00fcnde de beklenen bu d\u00f6ng\u00fc i\u015flemini de ng-repeat direktifiyle ger\u00e7ekle\u015ftiriyor olaca\u011f\u0131z. ng-repeat; C#,...<\/p>\n","protected":false},"author":1,"featured_media":7002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2022],"tags":[2053,2054,2038,2055,2056],"class_list":["post-7047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjsde-ic-ice-dongu","tag-angularjsde-ng-repeat","tag-ng-repeat","tag-ng-repeat-dongu","tag-ng-repeat-ic-ice-dongu"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7047"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7047\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7002"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}