-

Angular Js’de Fonksiyon Çağrısı Yapma

Önceki blog yazımda ng-repeat direktifi kullanarak listeleme ile ilgili örnek göstermiştim. Örneği biraz daha geliştirerek listeye eleman ekleme, listeden eleman çıkarma işleri yapabilmek için fonksiyon çağırma ile ilgili örnek gösteriyor olacağım…

names ismindeki listeye eklemiş olduğum elemanları ng-repeat direktifi ile ekrana listeleme işlemi yapmıştık. Listenin altına bir textbox ve buton ekliyoruz. Textbox’a girilen değeri ng-model=”enteredName” şeklinde saklıyoruz  ve ng-submit=”addName() direktifi ile AddName() ismindeki metodu çağıyoruz. Bu metodun yapacağı names ismindeki listeye eleman eklemek olacaktır. Bunu da

$scope.names.push($scope.enteredName);

Komutu ile yapar.

Diğer bir özellik, listeden eleman silme; bunu da listenin yanına bir link ekleyerek ng-click direktifi ile yine fonksiyon çağırarak yapıyoruz. ng-click=”removeName(name)” ile seçilen name parametresi ile removeName(name) çağırılır. Js tarafında ise aşağıdaki kodlar ile seçilen elemanın indexi bulunur ve listeden çıkarılır.

var i=$scope.names.indexOf(name);

$scope.names.splice(i,1);

Örneğin Html kodu aşağıdaki gibidir;

angularblog1

Örneğin Js kodu aşağıdaki gibidir;

angularblog2

Çıktısı;

angularblog3

Örneğin kodlarına aşağıdaki codepen linkinden erişebilirsiniz.

http://codepen.io/deryagunduzozmen/pen/JWKPQV?editors=1010

Kaynaklar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org
  3. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  4. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.112198
  5. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html