Cumartesi , 21 Ocak 2017
Anasayfa » JavaScript » AngularJS » AngularJS İki Yönlü Veri Bağlama (Two way databinding )

AngularJS İki Yönlü Veri Bağlama (Two way databinding )

Bu yazıda AngularJS de iki yönlü veri bağlamayı mantığını açıklayacağım . Yazı boyunca ng-model’in yararlı yönlerinden faydalanacağız.
Veri bağlama(data-binding) yapılarıda model değiştiğinde view(görünüm) de otomatik olarak değişmektedir.
Konuyu bir örnekle açıklayalım:

SCRIPT: Controller içindeki kodda $scope nesnesine mesaj adında bir özellik tutturulmuştur. Daha önceki yazılardan hatırladığımız gibi mesajımız burada modelimizi ifade etmektedir.

 

HTML & SCRIPT  : Mesaj özelliği modelde değiştiği gibi data binding bildirimi ile görüntü içinde otomatik olarak değişecektir.

Yukarıdaki bildirim yöntemi tek yönlü bir bildirimi ifade etmektedir. Model değiştiğinde view de otomatik olarak değişmiştir.

 

Peki view değiştiğinde model değişir mi?
Buna bir örneke devam edelim. Görüntü üzerinde bir tarih nesnesini değiştirdiğimizde model nasıl değişir. Bunun için anguların ng-model yönergesini kullanırız.
Aşağıdaki örnek ng-model yönergesi ile düzenlenmiştir. Bu örnekte text kutusndaki yazı değiştiğine $scope üzerine bağlı olan modelde değişmektedir. Unutmayın view üzerinde yaptığımız her hangi bir değişiklik modelimizi de değiştirmiş olacaktır.

Unutmayın iki yönlü veri bağlamada ng-model modeli anlık değiştirdiği için bu modeli kullanan view de otomatik olarak değiştirilmiş olacaktır. Aşağıdaki örnekte textbox nesnesi içinde yaptığımız bir değişikli modeli değiştirecek, view tarafında kullanılan modellerde otomatik olarak değişecektir. Buna biz iki yönlü veri bağlama diyoruz.(two way data-binding)

HTML & KOD: Bir önceki yazımızda bulunan örnekle devam edelim konumuza. Örneğim fazladan bir text kutusu ekliyoruz. ve ng-model değerini uye.dtarih olarak ayarlıyoruz. Text içindeki değer güncellendiğinde model güncellenecek. Güncellenen model viewdeki dtarih ifadesini güncelleyecektir.

 

Ng-model nesnesi 3 html etiketi ile kullanılabilir.

İnput

Select

Textarea

 

HTML & SCRIPT: bu örnekte birden fazla modeli bir arada nasıl kullandığımızı inceleyeceğiz. Yine ayrnı örnek üzerinden devam edelim. Modelimize fazladan bir soyisim alanı ekledik. Adı ve soyadı güncellediğimizde model ve bu modele bağlı tüm viewler güncellenecektir.

 

AngularJS Örnek Uygulama

 

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

Hakkında Hayri

İlginizi Çekebilir

AngularJS $anchorscroll Servis Kullanımı

$anchorscroll servisi sayfada belirtilen bir noktaya hareket etmek için kullanılır.  Bu yazıda $anchorscroll, $location servisleri ve $anchorscroll() …

Bir Cevap Yazın

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

Wordpress Tema indir