tutorial pengembangan web terbaru
 

AngularJS textarea Directive

❮ AngularJS Referensi

Contoh

Sebuah textarea dengan data-mengikat:

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

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

Definisi dan Penggunaan

AngularJS mengubah perilaku default dari <textarea> elemen, tetapi hanya jika ng-model atribut hadir.

Mereka menyediakan data-mengikat, yang berarti mereka adalah bagian dari model AngularJS, dan dapat disebut, dan diperbarui, baik dalam fungsi AngularJS dan di DOM.

Mereka menyediakan validasi. Contoh: sebuah <textarea> elemen dengan required atribut, memiliki $valid negara diatur ke false selama itu kosong.

Mereka juga menyediakan kontrol negara. AngularJS memegang keadaan saat semua elemen textarea.

bidang textarea memiliki status berikut:

  • $untouched Bidang belum tersentuh belum
  • $touched bidang telah tersentuh
  • $pristine Bidang belum diubah belum
  • $dirty lapangan telah dimodifikasi
  • $invalid Isi lapangan tidak valid
  • $valid Isi lapangan berlaku

Nilai dari setiap negara merupakan nilai Boolean, dan baik true dari false .

Sintaksis

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

Elemen textarea sedang disebut dengan menggunakan nilai ng-model atribut.

CSS Kelas

<textarea> elemen dalam aplikasi AngularJS diberikan kelas-kelas tertentu. Kelas-kelas ini dapat digunakan untuk elemen gaya textarea menurut negara mereka.

Kelas berikut ditambahkan:

  • ng-untouched lapangan belum tersentuh belum
  • ng-touched lapangan telah menyentuh
  • ng-pristine Bidang belum diubah belum
  • ng-dirty lapangan telah dimodifikasi
  • ng-valid Isi lapangan berlaku
  • ng-invalid Isi field tidak valid
  • ng-valid- key Salah satu kunci untuk setiap validasi. Contoh: ng-valid-required , berguna ketika ada lebih dari satu hal yang harus divalidasi
  • ng-invalid- key Contoh: ng-invalid-required

Kelas dihapus jika nilai mereka mewakili adalah false .

Contoh

Menerapkan gaya untuk elemen textarea sah dan tidak sah, menggunakan CSS standar:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Cobalah sendiri "
❮ AngularJS Referensi