Merhaba, bugün göreceğimiz konular şunlar:

• ng-init
• ng-model
• ng-repeat
• ng-if

ng-init 

Bu directive genellikle view üzerinde ufak göster gizle bir nesne onload işlemi olduğunda birşeyler çalıştırmak için kullanılır. İçerisine girilen işlemleri yapar, örneğin yazi diye bir değişkeni ng-init ile tanımlayalım ve bunu yazdıralım

<span ng-init="yazi='Elveda dünya'">
{{ yazi }}
</span>

şeklinde deneyebilirsiniz ng-init içinde fonksiyon da çalıştırabilirsiniz.

ng-model

Evet geldik en sevdiğim konuya :) aslında ng-init'e benziyor. Bu directive form elemanlarının değişikliklerini izlemek için kullanılır. Dikkat edilmesi gereken nokta model'e ait değişkenler önceden tanımlı değil ise undefined olarak görünür, yani default bir değer vermek sizin açınızdan faydalı olur. Örneğin kullanıcı adı şifre bilgilerini girerek bunları kontrol eden bir yapı kuralım. AppCtrl.js söyle olsun

Proje.controller('AppCtrl', function($scope){
	$scope.kullanici = {
		adi: "",
		sifre: ""
	};

	$scope.giris = function (kullanici) {
		if (kullanici.adi == "") {
			alert("adını girmelisin adamım");
		} else if (kullanici.sifre == "") {
			alert("şifreni girmelisin ahbab");
		} else {
			///
			alert("giriş başarılı dostum");
		}
	};
})

böylelikle ng-model için kullanacağımız modeli oluşturmuş olduk. index.html > body içi şöyle olsun

Kullanıcı adın : <input type="text" ng-model="kullanici.adi"> <br>
Şifren : <input type="password"  ng-model="kullanici.sifre"> <br>
<button ng-click="giris(kullanici)">Giriş</button>

böylelikle ne yapmış olduk giriş fonksiyonunun içine kullanici datasını ekleyip kontrol etmiş olduk. tabi body'ye AppCtrl'yi eklemeniz gerekiyor bunları artık söylemiyorum, biliyor olmanız gerekir.

ng-repeat

Yav aslında ben bunu da seviyorum bu da iyi :D Bu directive ise tekrar eden kayıtları yazdırmak için kullanılır. Emin olun append node ile uğraşmaktan o kadar kolay ki, inanılmaz derecede yetenekleri mevcut. Örneğin kullanıcı listemiz var ve biz bunu yazdırmak istiyoruz ve bu kayıtlar o kadar çok ki biz buraya arama kutusu ekliyoruz. AppCtrl.js söyle olsun

Proje.controller('AppCtrl', function($scope){
	$scope.kullanicilar = [
		{
			isim: "Mehmet",
			okul: "bilgisayar"
		},
		{
			isim: "Cavit",
			okul: "motor"
		},
		{
			isim: "Pelinsu",
			okul: "incik boncuk"
		}
	];
})

Artık verilerimiz geldi ve onu kullanicilar scope'una attık Bize sadece bunu yazdırmak kaldı.index.html > body içi şöyle olsun

<table>
	<tr>
		<th>isim</th>
		<th>okul</th>
	</tr>
	<tr ng-repeat="kullanici in kullanicilar">
		<td>{{kullanici.isim}}</td>
		<td>{{kullanici.okul}}</td>
	</tr>
</table>

artık verilerimiz yazıldı ama biz arama kutusuda ekleyeceğiz demiştik. işte burada komik derecede kolay bir filtreleme çıkıyor karşımıza. Tek yapmamız gereken bir input bulmak ve ona model vermek bakın :) index.html > body içi şöyle olsun

<input type="text" ng-model="ara"> <!-- arama kutumuz -->
<table>
	<tr>
		<th>isim</th>
		<th>okul</th>
	</tr>
	<tr ng-repeat="kullanici in kullanicilar | filter: ara"> <!-- filtremiz -->
		<td>{{kullanici.isim}}</td>
		<td>{{kullanici.okul}}</td>
	</tr>
</table>

ng-if

Gel gelelim ng-if'e aslında isminden de anlayacağınız gibi bildiğiniz if belirlediğiniz scope'a göre true ise elementi gösterir false ise göstermez. örnek bir butonumuz olsun tıklayınca gösterildi yazsın tekrar tıklayınca kapandı yazsın. index.html > body içi şöyle olsun

<button ng-init="jeton=true" ng-click="jeton=!jeton">Tıkla</button>
<span ng-if="jeton">gösterildi</span>
<span ng-if="!jeton">kapandı</span>

Bugünkü ders bu kadardı diğer derslerde görüşmek üzere :)