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.
<!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
<!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.
<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.
<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
<!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>
