AngularJS textarea yönergeleri

AngularJS Kılavuzu

tanımlama ve kullanım

AngularJS <textarea> elementsinin varsayılan davranışını değiştirir, ancak ng-model özniteliği.

onlar veri bağlantısı sağlar, bu da AngularJS modelinin bir parçası oldukları anlamına gelir ve AngularJS fonksiyonlarında ve DOM'da referans alınabilir ve güncellenebilir.

onlar doğrulama sağlar. Örnek: Var olan required özniteliğinin <textarea> elementi, boş olduğu sürece $valid durum ayarlanır false.

Ayrıca durum kontrolü sağlar. AngularJS tüm metin alan elementlerinin mevcut durumunu kaydeder.

Metin alan alanı aşağıdaki durumları içerir:

  • $untouched Bu alan henüz dokunmamıştır
  • $touched Bu alan dokunmuştur
  • $pristine Bu alan henüz değiştirilmedi
  • $dirty Bu alan değiştirildi
  • $invalid Alan içeriği geçersiz
  • $valid Alan içeriği geçerli

Her durum değeri bir boolean değer temsil eder, doğru veya yanlış olabilir.

Örnek

Veri bağlantılı metin alanı:

<textarea ng-model="myTextarea"></textarea>
<p>Metin alan alanının değeri:</p>
<h1>{{myTextarea}}</h1>

Kişisel Deneyim

语法

<textarea ng-model="name"></textarea>

Kullanarak ng-model değerleri, metin alan elementlerine atıfta bulunmak için kullanılır.

CSS sınıfları

AngularJS uygulaması içinde <textarea> Bir elemente belirli sınıflar verilir. Bu sınıflar, metin alan elementlerinin durumuna göre stillendirme yapmak için kullanılabilir.

Aşağıdaki sınıflar eklendi:

  • ng-untouched Bu alan henüz dokunmamıştır
  • ng-touched Bu alan dokunmuştur
  • ng-pristine Bu alan henüz değiştirilmedi
  • ng-dirty Bu alan değiştirildi
  • ng-valid Alan içeriği geçerli
  • ng-invalid Alan içeriği geçersiz
  • ng-valid-key Her seferinde bir anahtar doğrula. Örneğin:ng-valid-requiredbirden fazla şeyin doğrulanması gerektiğinde çok kullanışlıdır
  • ng-invalid-key Örneğin:ng-invalid-required

Sınıfın temsil ettiği değer falseise bu sınıflar silinecektir.

Örnek

Standart CSS kullanarak geçerli ve geçersiz metin alanı elementlerine stil uygula:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

Kişisel Deneyim

AngularJS Kılavuzu