Biraz daha direktiflerden bahsetmek istiyorum.. ng-click, ng-model ve ng-repeat direktifleri ile devam edebiliriz yazımıza.
ng-click
ng-click direktifi elemana tıkladığımızda özel bir davranış belirlememizi sağlar. Örneğin elemana tıklanınca ne yapılması gerektiğini belirleyebiliriz. Ya da bir fonksiyon çalıştırabiliriz gibi..
<div ng-app ng-init="site='erbilen.net'">
<a href="#" ng-click="site = 'prototurk.com'">[Siteyi değiştir!]</a>
{{ site }}
</div>
ng-model
ng-model için küçük bir örnek ile başlayalım. Hiç controller karıştırmadan ng-app dedikten sonra bu kodları çalıştıralım.
<input type="text" ng-model="kelime" />
<p>{{ kelime }}</p>
Evet artık input’a ne yazarsam hemen aşağısında o çıkacak.
Ya da daha farklı bir örnek vermek gerekirse;
<div ng-app="app">
<div ng-controller="myController">
<input type="text" placeholder="Birşeyler yaz.." ng-model="kelime" ng-bind="alert(kelime)">
</div>
</div>
Şimdi input’ta yazınca bind ettiğim için controllerımdaki alert metodum çalışacak ve yazılan değer ekranda alert ile gösterilecek.
var app = angular.module('app', []);
app.controller('myController', ['$scope', function($scope){
$scope.alert = function(str){
if ( typeof str != 'undefined' )
alert(str);
}
}]);
ng-repeat
$http servisi ile bir request yapıyoruz ve gelen datayı ng-repeat ile tekrarlatıyoruz. Yani kısaca döngüye sokuyoruz. Nasıl mı?
var app = angular.module('app', []);
var myController = function($scope, $http){
var onComplete = function(response){
$scope.repos = response.data;
}
var onError = function(response){
$scope.error = 'Bir sorun oluştu!';
}
$http.get('https://api.github.com/users/tayfunerbilen/repos')
.then(onComplete, onError);
};
app.controller('myController', ['$scope', '$http', myController]);
Şimdi html tarafında ise şöyle göstereceğim;
<div ng-app="app">
<div ng-controller="myController">
Tayfun Erbilen - Github Repo
<ul>
<li ng-repeat="repo in repos">
{{ repo.name }}
<span style="display: block; color: #777;">
{{ repo.description }}
</span>
</li>
</ul>
</div>
</div>
