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.
|
1 2 3 4 5 6 7 |
var app = angular .module("myModule", []) .controller("myController", function ($scope) { $scope.mesaj = "Merhaba Angular" }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html ng-app="myModule"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app = angular .module("myModule", []) .controller("myController", function ($scope) { $scope.mesaj = "Merhaba Angular" }); </script> </head> <body> <div ng-controller="myController"> {{ mesaj }} </div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html ng-app="kModul"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var kModul = angular .module("kModul", []) .controller("kController", function ($scope) { var uye = { isim: "Ali İhsan", dtarih: "10.10.1980", profil: "profil/k08.jpg" }; $scope.uye = uye; }); </script> </head> <body> <div ng-controller="kController"> <div> Doğum Tarihi:<input type="text" id="tarih" ng-model="uye.dtarih"> </div> <div> Adı : {{ uye.isim }} </div> <div> Doğum Tarihi : {{ uye.dtarih }} </div> <div> <img ng-src="{{uye.profil}}" alt="{{ uye.isim }}" style="height:100px; width:100px" /> </div> </div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!doctype html> <html ng-app="kModul"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var kModul = angular .module("kModul", []) .controller("kController", function ($scope) { var uye = { isim: "Ali İhsan", soyisim:"DOĞAN", dtarih: "10.10.1980", profil: "profil/k08.jpg" }; $scope.uye = uye; }); </script> </head> <body> <div ng-controller="kController"> <div> İsim:<input type="text" id="isim" ng-model="uye.isim"> </div> <div> Soyisim:<input type="text" id="soyisim" ng-model="uye.soyisim"> </div> <div> Adı Soyadı : {{ uye.isim }} {{ uye.soyisim }} </div> <div> Doğum Tarihi : {{ uye.dtarih }} </div> <div> <img ng-src="{{uye.profil}}" alt="{{ uye.isim }}" style="height:100px; width:100px" /> </div> </div> </body> </html> |
[…] Konu 5: AngularJS İki Yönlü Veri Bağlama (Two way databinding ) […]