Mevcut kapsam içinde bir değişken oluşturmak için ng-init yönergesini kullanılır.
Aşağıdaki basit örnek uygulama modülü içinde degisken adında bir tane direktif(değiken-yönerge) oluşturup yine aynı direktifte kullandık.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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("uygulama", []); </script> </head> <body ng-app="uygulama"> <div ng-init="degisken='Merhaba Dünya'"> {{degisken}} </div> </body> </html> |
Gerçek hayatta aşağıdaki örneği bu şekilde kullanamasak da ng-init yönergesinin anlatımı için ng-init içine müsterileri modelini müşteriler değişkeni olarak ekledik. ng-init içindeki ifade modül çalıştığı gibi ifade oluşturulp model ifadeye eklenecektir. Sonra ise önceki makalelerde yazdığım gibi ng-repeat ile tüm veriler üzerinde ileri yönlü okuma yaparak tüm modeli bir tablo içinde yazdırıyoruz.
Unutmayın gerçek bir örnekte model html içi yerine bir controller içine yazılıp kullanılır.
HTML&SCRIPT
|
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 |
<!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", []); </script> </head> <body ng-app="persModul"> <div ng-init="personeller=[ { isim: 'Yezden', soyisim: 'Erdurak', cinsiyet: 'Erkek', maas: '3569' }, { isim: 'Elfiye', soyisim: 'Şencin', cinsiyet: 'Erkek', maas: '4143' }, { isim: 'Teberhun',soyisim: 'Karadağ sazak',cinsiyet: 'Kız', maas: '2337' }, { isim: 'Çağar', soyisim: 'Alkan', cinsiyet: 'Kız', maas: '1883' }, { isim: 'Mükafi', soyisim: 'Düşer', cinsiyet: 'Kız', maas: '3869' }, { isim: 'Süreha',soyisim: 'Karakaya',cinsiyet: 'Erkek',maas: '1796' } ]"> <table border=1> <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"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> </html> |
Hadi gelin ng-init kavramını gerçek bir model üzerinde uygulayalım. Uygulamamızda Şehir isimlerini ve bu şehirlerin 2 tane ilçesini yazdıran model hazırlayıp bu modeli listeler halinde ekrana yazdıracağız. ng-repeat ile il ve ilçe isimlerini ekrana yazdırırken mevcut index değerini de ng-init alıp ekrana yazdıracağız. NOT:Angularda mevcut index değeri için $index ifadesi kullanılmaktadır.
SCRIPT:Aşağıdaki script kodu ile şehirler ve ilçeleri modelini oluşturup angular modülüne bağladık.
|
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 |
<script> var app = angular .module("uygulama", []) .controller("ornControl", function ($scope) { var sehirler = [ { adi: "İstanbul", ilceler: [ { adi: "Kartal" }, { adi: "Beylikdüzü" } ] }, { adi: "Edirne", ilceler: [ { adi: "Enez" }, { adi: "Keşan" }, ] } ]; $scope.sehirler = sehirler; }); </script> |
HTML:ng-init yönergesi ng-repeat ile dönmekte olan mevcut ilin index değerini alıp ustIndex değerine aktarıyor. Alttaki ng-repeat ile her hangi bir init değerine aktarmadan mevcut $index değerini ekrana yazdırıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body ng-app="uygulama"> <div ng-controller="ornControl"> <ul> <li ng-repeat="sehir in sehirler" ng-init="ustIndex = $index"> {{sehir.adi}} <ul> <li ng-repeat="ilce in sehir.ilceler"> {{ilce.adi}} -<b> Üst Index = {{ ustIndex }}, Index = {{ $index }}</b> </li> </ul> </li> </ul> </div> </body> |
HTML & SCRIPT
|
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 |
<!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("uygulama", []) .controller("ornControl", function ($scope) { var sehirler = [ { adi: "İstanbul", ilceler: [ { adi: "Kartal" }, { adi: "Beylikdüzü" } ] }, { adi: "Edirne", ilceler: [ { adi: "Enez" }, { adi: "Keşan" }, ] } ]; $scope.sehirler = sehirler; }); </script> </head> <body ng-app="uygulama"> <div ng-controller="ornControl"> <ul> <li ng-repeat="sehir in sehirler" ng-init="ustIndex = $index"> {{sehir.adi}} <ul> <li ng-repeat="ilce in sehir.ilceler"> {{ilce.adi}} -<b> Üst Index = {{ ustIndex }}, Index = {{ $index }}</b> </li> </ul> </li> </ul> </div> </body> </html> |
[…] Konu 15: AngularJS ng-init direktifi […]