ÖRNEKLER ile AngularJS'de “ng-model” nasıl kullanılır?
James Hartman
AngularJ'lerde ng-model nedir?
ng-model, Angular.JS'de modelleri temsil eden bir yönergedir ve temel amacı "görünümü" "modele" bağlamaktır.
Örneğin, son kullanıcıya aşağıda gösterilen gibi basit bir sayfa sunmak istediğinizi varsayalım; bu sayfada kullanıcıdan metin kutularına "Ad" ve "Soyad" girmesi isteniyor. Ve sonra kullanıcının veri modelinize girdiği bilgileri depoladığınızdan emin olmak istiyorsunuz.
“Ad” ve “Soyad” metin kutusu alanlarını veri modelinize eşlemek için ng-model yönergesini kullanabilirsiniz.
ng-model yönergesi, “görünüm”deki ve “model”inizdeki verilerin her zaman senkronize tutulmasını sağlayacaktır.
Ng-model Özelliği
Bu bölümün girişinde tartışıldığı gibi, ng-model özelliği, modelinizdeki verileri kullanıcıya sunulan görünüme bağlamak için kullanılır.
Ng-model özelliği aşağıdakiler için kullanılır:
- Görünümdeki giriş, metin alanı ve seçimler gibi kontrolleri modele bağlama.
- Doğrulama davranışı sağlayın – örneğin, bir metin kutusuna yalnızca sayısal karakterlerin girilebileceği bir doğrulama eklenebilir.
- ng-model niteliği kontrolün durumunu korur (Durum derken, kontrol ve verinin her zaman senkronize tutulması gerektiğini kastediyoruz. Verilerimizin değeri değişirse, kontroldeki değeri otomatik olarak değiştirir ve bunun tersi de geçerlidir)
Ng-modeli nasıl kullanılır?
1) Metin Alanı
Metin alanı etiketi, çok satırlı bir metin girişi kontrolünü tanımlamak için kullanılır. Metin alanı sınırsız sayıda karakter içerebilir ve metin sabit genişlikte bir yazı tipinde oluşturulur.
Şimdi ng-model direktifini bir metin alanı kontrolüne nasıl ekleyebileceğimize dair basit bir örneğe bakalım.
Bu örnekte, çok satırlı bir dizeyi denetleyiciden görünüme nasıl geçirebileceğimizi ve bu değeri metin alanı denetimine nasıl ekleyebileceğimizi göstermek istiyoruz.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
Kod Açıklaması:
- MKS ng-model direktifi “p” adlı üye değişkenini eklemek için kullanılırDescript"textarea" kontrolüne "iyon". "pDescription” değişkeni aslında metin alanı kontrolüne aktarılacak olan metni içerecektir. Textarea kontrolü için ayrıca row=2 ve cols=4 olmak üzere 50 özellikten de bahsetmiştik. Bu niteliklerden birden fazla metin satırı gösterebilmemiz için bahsedilmiştir. Bu nitelikleri tanımladığınızda, textarea artık 4 satır ve 50 sütuna sahip olacak ve böylece birden fazla metin satırı gösterebilecektir.
- Burada üye değişkenini “p” isimli kapsam nesnesine ekliyoruz.Description” ve değişkene bir dize değeri koymak.
- Metnin, metin alanında görüntülendiğinde birden çok satırdan oluşabilmesi için /n değişmez değerini dizeye yerleştirdiğimizi unutmayın. /n değişmez değeri metni birden çok satıra böler, böylece textarea kontrolünde birden çok metin satırı olarak işlenebilir.
Kod başarıyla yürütülürse, tarayıcıda kodu çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan,
- Açıkça görülebileceği gibi p'ye atanan değerDescriptKapsam nesnesinin bir parçası olarak ion değişkeni textarea kontrolüne aktarıldı.
- Daha sonra sayfa yüklendiğinde görüntülendi.
2) Giriş elemanları
ng-model yönergesi ayrıca metin kutusu, onay kutuları, radyo düğmeleri vb. gibi girdi elemanlarına da uygulanabilir.
ng-modelini “textbox” ve “checkbox” giriş tipiyle nasıl kullanabileceğimize dair bir örneğe bakalım.
Burada “Guru99” adında bir metin giriş tipimiz olacak ve 2 adet onay kutusu olacak, biri varsayılan olarak işaretlenecek, diğeri işaretlenmeyecek.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
Kod Açıklaması:
- MKS ng-model direktifi “pname” adlı üye değişkenini giriş tipi metin kontrolüne eklemek için kullanılır. “pname” değişkeni, metin giriş kontrolüne aktarılacak olan “Guru99” metnini içerecektir. Üye değişkenin adına herhangi bir adın verilebileceğini unutmayın.
- Burada üye değişkeni Topics.Controllers'a bağlı ilk onay kutumuz olan "Controllers"ı tanımlıyoruz. Onay kutusu bu onay kontrolü için işaretlenecek.
- Burada, üye değişkeni Topics.Models'e bağlı ilk onay kutumuz olan "Models"i tanımlıyoruz. Onay kutusu bu onay denetimi için işaretlenmeyecektir.
- Burada “pName” isimli üye değişkenini ekliyoruz ve “Guru99” string değerini koyuyoruz.
- "Topics" adında bir üye dizi değişkeni tanımlıyoruz ve buna iki değer veriyoruz, birincisi "true" ve ikincisi "false". Yani ilk onay kutusu true değerini aldığında, onay kutusu bu kontrol için işaretlenecek ve aynı şekilde, ikinci değer false olduğundan, onay kutusu bu kontrol için işaretlenmeyecektir.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan,
- pName değişkenine atanan değerin “Guru99” olduğu açıkça görülmektedir.
- İlk kontrol değeri “true” olduğundan geçti, “Controllers” onay kutusu için onay kutusu işaretlendi. Aynı şekilde ikinci değer false olduğundan, “Models” onay kutusu için onay kutusu işaretlenmedi.
3) Açılır menüden öğe seçin
Ng-model direktifi aynı zamanda select öğesine de uygulanabilir ve liste öğelerini seçim listesinde doldurmak için kullanılabilir.
Ng modelini select giriş tipiyle nasıl kullanabileceğimize dair bir örneğe bakalım.
Burada “Guru99” ismine sahip bir metin giriş tipimiz olacak ve “Kontrolör” ve “Modeller” olmak üzere 2 liste öğesi içeren bir seçim listesi olacak.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- MKS ng-model direktifi Select type kontrolüne “Topics” isimli üye değişkenini eklemek için kullanılır. Seçim kontrolünün içine, seçeneklerin her biri için, ilk seçenek için Topics.option1'in ve ikinci seçenek için Topics.option2'nin üye değişkenini ekliyoruz.
- Burada 2 anahtar-değer çifti tutan Topics dizi değişkenimizi tanımlıyoruz. İlk çiftin değeri “Controllers” ve ikinci çiftin değeri “Models”. Bu değerler görünümdeki select input etiketine geçirilecek. Kod başarıyla yürütülürse, aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan pName değişkenine atanan değerin “Guru99” olduğu ve select giriş kontrolünün “Controllers” ve “Models” seçeneklerine sahip olduğunu görebiliriz.
ÖZET
- Angular JS'deki modeller ng-model direktifiyle temsil edilir. Bu direktifin temel amacı görünümü modele bağlamaktır. Ng-app, ng-controller ve ng-model direktiflerini kullanarak basit bir denetleyici nasıl oluşturulur.
- Ng-model direktifi bir "metin alanı" giriş kontrolüne bağlanabilir ve çok satırlı dizeler denetleyiciden görünüme aktarılabilir.
- ng-model yönergesi, çalışma zamanında daha dinamik hale getirmek için metin ve onay kutusu denetimleri gibi giriş denetimlerine bağlanabilir.
- Ng-model direktifi ayrıca bir seçim listesini kullanıcıya görüntülenebilecek seçeneklerle doldurmak için de kullanılabilir.
