En son web geliştirme öğreticiler
 

AngularJS metin alanı Yönergesi


Örnek

Veri bağlama ile bir metin alanı:

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

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Kendin dene "

Tanımı ve Kullanımı

Angularjs varsayılan davranışını değiştiren <textarea> elemanlar, ama sadece ng-model niteliği mevcuttur.

Onlar angularjs modelinin parçasıdır ve angularjs fonksiyonları ve DOM hem de adlandırılan, ve güncellenebilir anlamına gelir, veri bağlama sağlar.

Bu doğrulama sağlamak. Örnek: Bir <textarea> bir ile eleman required öznitelik vardır $valid olarak ayarlanmış durumu false sürece boş olarak.

Onlar da devlet kontrolü sağlar. Angularjs tüm metin alanı elemanlarının mevcut durumunu tutar.

Textarea alanları aşağıdaki durumlarda:

  • $untouched alanında henüz dokunulmaz değil
  • $touched alan dokundu
  • $pristine alan henüz değiştirilmedi
  • $dirty alan modifiye edilmiş
  • $invalid alan içerik geçerli değil
  • $valid alan içerik geçerlidir

Her durum değeri bir Boole bir değeri temsil eder, ve her iki olan true bir false .


Sözdizimi

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

Metin alanı öğeleri değerini kullanarak ifade edilmektedir ng-model öznitelik.


CSS Sınıfları

<textarea> bir angularjs uygulama içinde elemanları bazı sınıflar verilmiştir. Bu sınıflar kendi durumuna göre stil textarea elemanlarına kullanılabilir.

Aşağıdaki sınıflar ilave edilir:

  • ng-untouched alan henüz dokunulmaz değil
  • ng-touched alanı değinilmiştir
  • ng-pristine alan henüz modifiye edilmemiştir
  • ng-dirty alan modifiye edilmiş
  • ng-valid alan içerik geçerlidir
  • ng-invalid alan içerik geçerli değildir
  • ng-valid- key her doğrulama için bir anahtar. Örnek: ng-valid-required , yararlı birden fazla şey varken valide edilmesi gerektiğini
  • ng-invalid- key Örnek: ng-invalid-required

Temsil ettiği bir değer ise sınıfları kaldırılır false .

Örnek

Standart CSS kullanarak, geçerli ve geçersiz metin alanı öğelerin stillerini uygulayın:

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