AngularJs'de ng-modeli nedir?
ng-model, Angular.JS'de modelleri temsil eden bir yönergedir ve birincil amacı "görünümü" "modele" bağlamaktır.
Örneğin, son kullanıcıya aşağıda gösterilene benzer ve kullanıcıdan metin kutularına "Ad" ve "Soyadı" girmesini isteyen basit bir sayfa sunmak istediğinizi varsayalım. Ve sonra, kullanıcının veri modelinize girdiği bilgileri sakladığınızdan emin olmak istediniz.
"Ad" ve "Soyadı" metin kutusu alanlarını veri modelinize eşlemek için ng-model direktifini kullanabilirsiniz.
Ng-modeli direktifi, "görünümdeki" ve "modelinizin" verilerinin tüm zaman boyunca senkronize tutulmasını sağlayacaktır.
Bu eğitimde öğreneceksiniz-
- Ng-model özelliği
- Ng modeli nasıl kullanılır
- Metin Alanı
- Giriş öğeleri
- Eleman formu seçin Açılır Menü
Ng-modeli Özniteliği
Bu bölümün girişinde tartışıldığı gibi, ng modeli niteliği, modelinizdeki verileri kullanıcıya sunulan görünüme bağlamak için kullanılır.
Ng-model özelliği,
- Giriş, metin alanı gibi bağlama kontrolleri ve görünümdeki seçimler modele.
- Bir doğrulama davranışı sağlayın - örneğin, metin kutusuna yalnızca sayısal karakterlerin girilebildiği bir metin kutusuna doğrulama eklenebilir.
- Ng-modeli özniteliği kontrolün durumunu korur (Durum olarak, kontrol ve verilerin her zaman senkronize tutulmasının zorunlu olduğunu kastediyoruz. Verilerimizin değeri değişirse, kontroldeki değeri otomatik olarak değiştirecek ve tersine)
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 tutabilir 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, denetleyiciden görünüme çok satırlı bir dizeyi nasıl geçirebileceğimizi ve bu değeri metin alanı denetimine nasıl ekleyebileceğimizi göstermek istiyoruz.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Ng model yönergesi "textarea" kontrolüne "pDescription" denilen üye değişkeni eklemek için kullanılır.
"PDescription" değişkeni, aslında metin alanı denetimine aktarılacak olan metni içerecektir. Ayrıca metin alanı denetimi için satırlar = 4 ve cols = 50 olan 2 öznitelikten de bahsettik. Bu niteliklerden, birden fazla metin satırı gösterebilmemiz için bahsedilmiştir. Bu öznitelikleri tanımlayarak, metin alanı artık 4 satıra ve 50 sütuna sahip olacak, böylece birden çok metin satırı gösterebilecektir.
- Burada üye değişkenini "pDescription" adlı kapsam nesnesine ekliyoruz ve değişkene bir dizge değeri koyuyoruz.
- Metin alanında görüntülendiğinde metnin birden çok satırdan oluşması için dizeye / n hazır bilgisini koyduğumuzu unutmayın. / N değişmez değeri, metni birden çok satıra böler, böylece metin alanı denetiminde birden çok metin satırı olarak işlenebilir.
Kod başarıyla yürütülürse, kodu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Kapsam nesnesinin bir parçası olarak pDescription değişkenine atanan değerin textarea denetimine geçirildiği açıkça görülebilir.
- Daha sonra, sayfa yüklendiğinde görüntülendi.
2) Giriş öğeleri
Ng-modeli direktifi, metin kutusu, onay kutuları, radyo düğmeleri vb. Gibi giriş öğelerine de uygulanabilir.
Ng modelini "metin kutusu" ve "onay kutusu" giriş türü ile nasıl kullanabileceğimizin bir örneğine bakalım.
Burada "Guru99" adını taşıyan bir metin giriş türüne sahip olacağız ve biri varsayılan olarak işaretlenecek ve diğeri işaretlenmeyecek 2 onay kutusu olacak.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Ng model yönergesi giriş türü metin kontrolüne "pname" denilen üye değişkeni eklemek için kullanılır. "Pname" değişkeni, metin girişi denetimine aktarılacak olan "Guru99" metnini içerecektir. Üye değişken adına herhangi bir isim verilebileceğini unutmayın.
- Burada, Topics.Controllers üye değişkenine eklenen ilk onay kutumuz olan "Denetleyicileri" tanımlıyoruz. Bu kontrol kontrolü için onay kutusu işaretlenecektir.
- Burada, Topics.Models üye değişkenine eklenen ilk onay kutumuz olan "Modeller" i tanımlıyoruz. Bu kontrol kontrolü için onay kutusu işaretlenmeyecektir.
- Burada "pName" adlı üye değişkeni ekliyoruz ve "Guru99" için bir dize değeri koyuyoruz.
- "Topics" adında bir üye dizi değişkeni bildiriyoruz ve ona iki değer veriyoruz, birincisi "true" ve ikincisi "false".
Bu nedenle, ilk onay kutusu true değerini aldığında, bu kontrol için onay kutusu işaretlenecek ve benzer şekilde, ikinci değer yanlış olduğundan, bu kontrol için onay kutusu 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ülebilir.
- İlk kontrol değeri geçildiği için "true" olduğundan, onay kutusu "Kontrolörler" onay kutusu olarak işaretlenmiştir. Benzer şekilde, ikinci değer yanlış olduğundan, onay kutusu "Modeller" onay kutusu için işaretlenmez.
3) Öğe formu Açılır Menüyü seçin
Ng-model direktifi, seçilen öğeye de uygulanabilir ve seçim listesindeki liste öğelerini doldurmak için kullanılabilir.
Ng modelini seçme giriş türü ile nasıl kullanabileceğimize dair bir örneğe bakalım.
Burada "Guru99" adını taşıyan bir metin giriş türüne sahip olacağız ve "Denetleyici" ve "Modeller" olmak üzere 2 liste öğesi içeren bir seçim listesi olacak.
Event Registration Guru99 Global Event
- Ng model yönergesi seçme tip kontrolüne "Konular" adlı üye değişkeni eklemek için kullanılır. Seçme denetiminin içine, seçeneklerin her biri için, ilk seçenek için Topics.option1 ve ikinci seçenek için Topics.option2 üye değişkenini ekliyoruz.
- Burada, 2 anahtar-değer çiftini tutan Topics dizi değişkenimizi tanımlıyoruz. İlk çift "Kontrolörler" değerine ve ikincisi "Modeller" değerine sahiptir. Bu değerler, görünümdeki giriş etiketini seçmek için geçirilecektir.
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 seçili giriş kontrolünün "Kontrolörler" ve "Modeller" seçeneklerine sahip olduğu görülebilir.
Özet
- Angular JS'deki modeller ng-model direktifi ile 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 kontrolör nasıl oluşturulur.
- Ng modeli direktifi, bir "metin alanı" giriş kontrolüne bağlanabilir ve çok satırlı dizeler kontrolörden görünüme geçirilebilir.
- Ng-model direktifi, çalışma zamanında daha dinamik hale getirmek için metin ve onay kutusu kontrolleri gibi giriş kontrollerine bağlanabilir.
- Ng-model direktifi, kullanıcıya görüntülenebilen seçeneklerle bir seçim listesini doldurmak için de kullanılabilir.