ÖRNEKLER ile AngularJS'de “ng-model” nasıl kullanılır?

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS'deki `ng-model`, bir giriş kontrolünü doğrudan `$scope` üzerindeki bir özelliğe bağlar.ping Görünüm ve model her iki yönde de senkronize edilmiştir. Aşağıdaki bölümler, özniteliği, üç çalışan örneği ve yeni başlayanların en sık karşılaştığı hataları kapsamaktadır.

  • 🔗 Çift Yönlü Bağlama: ng-model, kullanıcı girdisini `$scope` özelliğine aktarır ve denetleyici değişikliklerini otomatik olarak denetleyiciye geri gönderir.
  • 📝 Metin Alanı Bağlaması: Çok satırlı bir metni bir metin alanına bağlayın ve oluşturulan değerde satır sonlarını zorlamak için \n kaçış dizisini kullanın.
  • ☑️ Onay Kutusu Durumu: `ng-model` ile ilişkilendirilmiş bir onay kutusu bir boolean değer saklar; bu nedenle `true` değeri kutuyu işaretli, `false` değeri ise işaretsiz bırakır.
  • ???? Açılır Listeler: Bir select elementini ng-options ile doldurun ve seçilen öğeyi ayrı bir model özelliğine bağlayın.
  • ⚠️ Sık karşılaşılan hata: Bir select öğesini, seçenek metnini sağlayan aynı nesneye bağlamak, ilk seçimde o nesnenin üzerine yazılmasına neden olur.
  • ️ Doğrulama Kancaları: ng-model, koşullu stil ve form kontrollerini yönlendiren ng-pristine, ng-dirty, ng-valid ve ng-invalid sınıflarını ekler.
Devamını Oku

AngularJS'de ng-model nedir?

ng-model, AngularJS'de modeli temsil eden bir yönergedir ve temel amacı "görünümü" "modele" bağlamaktır. Kullanıcının bir kontrole yazdığı her şey doğrudan modeldeki bir özelliğe yazılır. $scopeDenetleyicinin bu özelliğe yazdığı her şey doğrudan denetleyiciye geri gönderilir.

Örneğin, son kullanıcıya aşağıdaki gibi basit bir sayfa sunmak istediğinizi ve kullanıcıdan metin kutularına "Ad" ve "Soyad" girmesini istediğinizi varsayalım. Ardından, kullanıcının girdiği bilgileri veri modelinizde saklamak istediğinizi düşünelim.

`ng-model` yönergesini kullanarak "Ad" ve "Soyad" metin kutusu alanlarını veri modelinize eşleyebilirsiniz. Bu yönerge, tek bir satır olay işleme kodu yazmanıza gerek kalmadan, "görünüm"deki verilerle "model"inizdeki verilerin her zaman senkronize kalmasını sağlayacaktır.

⚠️ Sürüm notu: AngularJS (1.x dalı) 31 Aralık 2021 tarihinde kullanım ömrünün sonuna ulaştı ve artık güvenlik yamaları almıyor. Aşağıdaki örnekler hala çalışıyor, ancak modern Angular'da aynı iki yönlü bağlama şu şekilde yazılıyor: [(ngModel)] ve FormsModule'ü gerektirir.

Ng-model Özelliği

Yukarıdaki bölümde de açıklandığı gibi, `ng-model` özniteliğ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:

  1. Görünümdeki input, text area ve select elementleri gibi kontrolleri modele bağlama.
  2. Doğrulama davranışı sağlamak; örneğin, bir metin kutusuna yalnızca sayısal karakterlerin girilebilmesi için doğrulama eklenebilir.
  3. Kontrolün durumunu korumak. Durumdan kastımız, kontrol ve verilerin her zaman senkronize halde tutulmasıdır: verilerin değeri değişirse, kontroldeki değer otomatik olarak değişir ve tersi de geçerlidir.
  4. Bu durumu CSS sınıfları olarak ortaya koymak. AngularJS şunları ekler: ng-pristine, ng-dirty, ng-valid hem de ng-invalid ng-model içeren her kontrole, bu da formların koşullu stilini belirlemeyi kolaylaştırır.

Bu özelliği anladıktan sonraki adım, onu en sık karşılaşacağınız üç kontrol türüne uygulamaktır.

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 yönergesini bir metin alanı denetimine 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 aktarabileceğimizi ve bu değeri metin alanı denetimine nasıl ekleyebileceğimizi göstermek istiyoruz.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </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>

Code Açıklama:

  1. MKS ng-model direktifi “p” adlı üye değişkenini ekler.Descript“p” ifadesini “textarea” kontrolüne ekleyin.Descript"ion" değişkeni, metin alanı denetimine iletilen metni tutar. rows="4" hem de cols="50" Özellikler, çok satırlı metnin düzgün şekilde görüntülenmesi için denetim öğesinin boyutunu ayarlar.
  2. Üye değişkeni “pDescript"İyon"a çok satırlı bir değer atanır. \n Metin alanı metni oluşturduğunda, metnin ikinci satıra geçmesini sağlayan şey, dize içindeki kaçış dizisidir.

Çıktı:

Çıktıdan da anlaşılacağı üzere, denetleyicide atanan çok satırlı metin, metin alanı denetiminde, tam olarak iki satıra bölünmüş şekilde görüntülenmektedir. \n oturur.

İLGİLİ MAKALELER

2) Giriş elemanları

`ng-model` yönergesi sıradan giriş öğeleriyle de çalışır. Aşağıda, bir metin kutusunu ve iki onay kutusunu aynı anda bağlıyoruz, böylece `ng-model`'in bir dize değerini ve bir boolean değerini yan yana nasıl işlediğini görebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/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>

Code Açıklama:

  1. `ng-model` yönergesi, "pname" üye değişkenini metin giriş denetimine ve özelliklerini ekler. Topic.Controller hem de Topic.Models iki onay kutusu denetimine.
  2. Denetleyicide, "pname"e "Guru99” ve “Topic” nesnesine iki boolean üye atanmıştır. ng-model ile ilişkilendirilmiş bir onay kutusu her zaman bir boolean değeri okur ve yazar, bu yüzden true kutuyu işaretli olarak gösterir ve false Konuyu netleştiriyor.

Çıktı:

Çıktıdan,

  • Atanan değerin açıkça görülebildiği anlaşılıyor. pname değişken "Guru99. "
  • İlk sınır değeri olduğundan true“Denetleyici” onay kutusu işaretlenmiştir. Benzer şekilde, ikinci değer de aynı olduğundan false“Modeller” onay kutusu işaretlenmemiş.

3) Açılır menüden öğe seçin

`ng-model` yönergesi, `select` öğesine de uygulanabilir, böylece kullanıcının seçtiği öğe `model`'de saklanır.

Burada " ismini tutacak bir metin giriş alanımız olacak.Guru99” ve “Denetleyici” ve “Modeller” olmak üzere iki liste öğesi içeren bir seçim listesi.

⚠️ Düzeltme: Yukarıdaki ekran görüntüsü, select öğesini aynı öğeye bağlayan orijinal listeyi göstermektedir. Topics Seçenek metnini sağlayan nesne. Kullanıcı bir seçenek belirlediği anda, AngularJS bunu geçersiz kılar. Topics Seçilen dizeyle birlikte her iki seçenek de kaybolur. Aşağıdaki düzeltilmiş liste, listeyi bir özellikte, seçimi ise başka bir özellikte tutar ve şunu kullanır: ng-options Listeyi oluşturmak için.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/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>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code Açıklama:

  1. Metin girişi şuna bağlıdır: pNameve select elementi şuna bağlıdır: selectedTopicÇünkü select öğesinin kendine ait bir model özelliği olduğundan, bir seçeneği belirlemek listenin kendisini asla etkilemez.
  2. MKS Topics Dizi, "Controller" ve "Models" olmak üzere iki değer içerir. ng-options Bu ifade diziyi dolaşır ve her giriş için bir seçenek sunar, bu nedenle üçüncü bir konu eklemek işaretlemede herhangi bir değişiklik gerektirmez.
  3. selectedTopic İlk girişe önceden ayarlanmıştır; bu da açılır menünün boş bir satır yerine mantıklı bir varsayılan değerle açılmasını sağlar.

Çıktı:

Çıktıdan, atanan değerin şu şekilde olduğu görülebilir: pName değişken "Guru99” ve seçim kontrolü “Denetleyici” ve “Modeller” seçeneklerini sunuyor. Çalışan örnekleri bir kenara bırakırsak, bağlantılar bazen güncellenmeyi reddediyor ve bunun nedenlerini bilmekte fayda var.

ng-model Bağlantılarının Bazen Başarısız Olmasının Nedenleri

Bildirilen ng-model sorunlarının çoğu AngularJS'deki hatalardan değil, kapsamların ve temel veri tiplerinin çalışma biçiminden kaynaklanan sonuçlardan kaynaklanmaktadır.

Klasik örnek, bir alt kapsam oluşturan bir yönerge içine yerleştirilen bir bağlamadır, örneğin: ng-tekrarng-if veya ng-switch. Yazma ng-model="name" Burada alt kapsamda bir gölge kopya oluşturulur, bu nedenle üst kapsam düzenlemeyi asla görmez. Bunun yerine bir nesnenin özelliğine bağlama — ng-model="user.name" — her kapsamın aynı referansa işaret etmesini sağlar. Deneyimli AngularJS geliştiricilerinin her ng-model ifadesinde nokta kullanmakta ısrar etmesinin nedeni budur.

Geri kalanının büyük kısmını açıklayan iki neden daha var:

  • Eksik kontrolcü veya modül: Eğer `ng-app` veya `ng-controller` yanlış yazılırsa, bağlama işlemi hata vermek yerine sessizce hiçbir şey oluşturmaz.
  • Değer AngularJS dışında değiştirildi: jQuery işleyici veya setTimeout geri çağırma işlevinden gelen bir değer, digest döngüsünün dışında kaldığı için görünüm yenilenmez. $scope.$apply() koşar.

Bu üç şeyi kontrol etmek, çalışmayan bağlantıların büyük çoğunluğunun sorununu çözüyor.

SSS

`ng-bind` tek yönlüdür: bir model değerini bir öğeye yazdırır. `ng-model` ise çift yönlüdür ve yalnızca form kontrollerinde çalışır, bu nedenle kullanıcı girdisi hem modele geri akar hem de modelden dışarı akar.

Örneğin, `ng-model-options=”{ debounce: 500 }”` şeklinde `ng-model-options` ekleyin. AngularJS daha sonra modeli güncellemeden önce son tuş vuruşundan yarım saniye bekler; bu, istek tetikleyen arama kutuları için kullanışlıdır.

Genel olarak evet. Yapay zeka asistanları ng-model'i [(ngModel)] olarak yeniden yazıyor ve FormsModule içe aktarımını ekliyor. Reaktif formlar, özel ayrıştırıcılar ve $formatters işlem hatları hala manuel incelemeye ihtiyaç duyuyor, çünkü Angular bunları çok farklı şekilde modelliyor.

Yapay zeka araçları, genellikle karşılaşılan hataları hızlıca kontrol eder: alt kapsamdaki bir ilkel sınır, yanlış yazılmış bir denetleyici adı ve özet döngüsünün dışında atanan bir değer. Her biri konsol hatası yerine sessiz bir hata üretir.

Yalnızca `type="number"` girişi sayısal bir değere dönüştürülür. `type="text"` kontrolü her zaman bir metin dizesi döndürür, bu nedenle `===` ile karşılaştırmalar başarısız olur. Açıkça dönüştürün veya giriş türünü değiştirin.

Bu yazıyı şu şekilde özetleyin: