AngularJS inputYönergesi
Örnek
Veri bağlamalı bir giriş alanı:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Tanım ve Kullanım
AngularJS, öğelerin varsayılan davranışını değiştirir <input>, ancak yalnızca ng-modelöznitelik varsa.
Veri bağlama sağlarlar, yani AngularJS modelinin bir parçası olurlar ve hem AngularJS işlevlerinde hem de DOM'da başvurulabilir ve güncellenebilirler.
Doğrulama sağlarlar. Örnek: özniteliği <input>olan bir öğe , boş olduğu sürece durumu ayarlıdır
.required$validfalse
Ayrıca devlet kontrolü sağlarlar. AngularJS, tüm girdi öğelerinin mevcut durumunu tutar.
Giriş alanları aşağıdaki durumlara sahiptir:
$untouchedHenüz alana dokunulmadı$touchedAlana dokunuldu$pristineAlan henüz değiştirilmedi$dirtyAlan değiştirildi$invalidAlan içeriği geçerli değil$validAlan içeriği geçerli
Her durumun değeri bir Boolean değerini temsil eder ve ya true
veya false.
Sözdizimi
<input ng-model="name">
ng-modelGirdi öğelerine, özniteliğin değeri kullanılarak başvurulur .
CSS Sınıfları
<input>AngularJS uygulamasının içindeki öğelere belirli sınıflar verilir . Bu sınıflar, girdi öğelerini durumlarına göre biçimlendirmek için kullanılabilir.
Aşağıdaki sınıflar eklenir:
ng-untouchedHenüz alana dokunulmadıng-touchedAlana dokunuldung-pristineAlan henüz değiştirilmeding-dirtyAlan değiştirilding-validAlan içeriği geçerling-invalidAlan içeriği geçerli değilng-valid-keyHer doğrulama için bir anahtar . Örnek:ng-valid-required, doğrulanması gereken birden fazla şey olduğunda kullanışlıdırng-invalid-keyÖrnek:ng-invalid-required
Temsil ettikleri değer ise sınıflar kaldırılır false.
Örnek
Standart CSS kullanarak geçerli ve geçersiz giriş öğeleri için stiller uygulayın:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>