AngularJS ng-click, ng-model ve ng-repeat direktifleri

ng-click: Bu 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. Burda kelime isminde bir model oluşturuluyor ve bu kelime hemen altında yazdırılıyor. modelin içeriği değiştiği anda yazdırılan içerik anında değişiyor.

<input type="text" ng-model="kelime" />
<p>{{ kelime }}</p>

başka bir kullanım; Burda 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.

<div ng-app="app">
<div ng-controller="myController">
<input type="text" placeholder="Birşeyler yaz.." ng-model="kelime" ng-bind="alert(kelime)">
</div>
</div>

AngularJS kodu

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. For each gibi düşünülebilir.

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]);

Htlm gösterimi;

<div ng-app="app">
<div ng-controller="myController">
Github Repo
<ul>
<li ng-repeat="repo in repos">
{{ repo.name }}
<span style="display: block; color: #777;">
{{ repo.description }}
</span>
</li>
</ul>
</div>
</div>
angularjs-1

alıntıdır…

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s