Instruksi textarea AngularJS

definisi dan penggunaan

AngularJS mengubah <textarea> kelakuan baku elemen, tetapi dengan syarat ng-model properti ada.

Mereka menyediakan pengikatan data, yang berarti mereka adalah bagian dari model AngularJS dan dapat diambil alih dan diupdate dalam fungsi AngularJS dan DOM.

Mereka menyediakan pengesahan. Contoh: yang memiliki required properti <textarea> elemen, selama ia kosong, nilai $valid Status akan diatur false.

Mereka juga menyediakan kontrol status. AngularJS menyimpan status semua elemen area teks saat ini.

Field area teks memiliki status berikut:

• $untouched ahli fiadah ini belum disentuh
• $touched ahli fiadah ini telah disentuh
• $pristine Medan ini belum diubah
• $dirty Medan ini telah diubah
• $invalid Kandungan medan tidak sah
• $valid Kandungan medan sah

Setiap nilai status mewakili nilai boolean, yang berarti benar atau salah.

Contoh

Area teks dengan pengikatan data:

<textarea ng-model="myTextarea"></textarea>
<p>Nilai field area teks adalah:</p>
<h1>{{myTextarea}}</h1>

Cuba Sendiri

Sintaks

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

Dengan menggunakan ng-model nilai properti untuk merujuk kepada elemen area teks.

Kelas CSS

Dalam aplikasi AngularJS <textarea> Elemen dihubungkan dengan kelas yang dapat digunakan untuk menetapkan gaya berdasarkan status elemen area teks.

Di tambahkan kelas berikut:

• ng-untouched ahli fiadah ini belum disentuh
• ng-touched ahli fiadah ini telah disentuh
• ng-pristine Medan ini belum diubah
• ng-dirty Medan ini telah diubah
• ng-valid Kandungan medan sah
• ng-invalid Kandungan medan tidak sah
• ng-valid-key Memvalidasi setiap kunci sekali. Contoh:ng-valid-requiredberguna saat lebih dari satu hal harus dipastikan.
• ng-invalid-key Contoh:ng-invalid-required

Jika nilai yang diwakili oleh kelas adalah falseJika kelas ini dihapus.

Contoh

Gunakan CSS standar untuk melaksanakan gaya untuk elemen kawasan teks yang sah dan tidak sah:

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

Cuba Sendiri