Pazartesi , 11 Aralık 2017
Anasayfa » JavaScript » AngularJS » AngularJS Olay Kullanımı

AngularJS Olay Kullanımı

Bu yazıda AngularJS ile olayları nasıl işlediğimizi inceleyeceğiz.
Olayları anlatmanın en kolay yolu bir örnekle açıklamak olsa gerek. Hadi bir örnekle AngularJS de olaylar nasıl kullanılıyor açıklayalım.
angularjs-event

 

Yukarıdaki tabloda beğen ve beğenme butonları var. Hemen yanlarında da programlama dilleri ve bunları beğenme durumları mevcut. Beğen butonuna basınca beğen değeri bir artacak. Beğenme butonuna basınca beğenme değeri 1 artacak.
Bu açıklamadan sonra angular tarafında neler olacağını açıklayalım.
SCRIPT :Anguarjs tarafında İki tane metodumuz olacak. Birincisi beğen olayını takip edecek. İkincisi de beğenme olayını takip edecek.
Bir de programlama dilleri için bir tane de modelimiz olması gerekiyor. Diller adındaki model içinde dilin adını, beğen ve beğenme oranlarını tutacak.
Toparlayacak olursak, controller içinde iki metod ve bir tane modeli aşağıdaki şekilde oluşturmuş olacağız.

 

HTML: Dikkatle baktığımızda beğen() ve beğenme() metodlarını butonlara bağladığımızı göreceksiniz. Butonlara tıkladığımızda bağlı olan fonksiyon çalışacak ve beğen yada beğenme değerini otomatik olarak arttıracaktır.
Burada dikkat edilmesi gereken nokta şu olabilir. Ng-repeat ile dizilerden bir nesne çekilmiş (burada dil) ve olaya parametre olarak geçilmiştir. Olay hangi değeri arttıracağını bu geçilen parametre ile anlamaktadır.

 

HTML & SCRIPT

 

Ayrıca angularjs ile şu olay yönergelerini de kullanarak HTML öğelerini dinleyebilirsiniz.

  • ng-blur
  • ng-change
  • ng-click
    ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste
AngularJS Örnek Uygulama

 

AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir