textarea
Misol
Ma’lumotlarni bog‘lash (data-binding) bilan ishlaydigan textarea:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
AngularJS <textarea> elementlarining standart xatti-harakatini o‘zgartiradi, lekin faqat ng-model atributi mavjud bo‘lgandagina.
Ular ma’lumotlarni bog‘lashni ta’minlaydi, ya’ni ular AngularJS modelining bir qismi bo‘lib, ularga AngularJS funksiyalarida ham, DOM’da ham murojaat qilish va ularni yangilash mumkin.
Ular validatsiyani ta’minlaydi. Masalan: required atributiga ega <textarea> elementi bo‘sh ekan, uning $valid holati false qiymatiga o‘rnatilgan bo‘ladi.
Ular holatni nazorat qilishni ham ta’minlaydi. AngularJS barcha textarea elementlarining joriy holatini saqlaydi.
Textarea maydonlari quyidagi holatlarga ega:
$untouchedMaydonga hali tegilmagan$touchedMaydonga tegilgan$pristineMaydon hali o‘zgartirilmagan$dirtyMaydon o‘zgartirilgan$invalidMaydon mazmuni yaroqsiz$validMaydon mazmuni yaroqli
Har bir holatning qiymati boolean qiymatni ifodalaydi va true yoki false bo‘ladi.
Sintaksis
<textarea ng-model="name"></textarea>
Textarea elementlariga ng-model atributining qiymati orqali murojaat qilinadi.
CSS klasslari
AngularJS ilovasi ichidagi <textarea> elementlariga ma’lum klasslar beriladi. Bu klasslar yordamida textarea elementlariga ularning holatiga ko‘ra uslub berish mumkin.
Quyidagi klasslar qo‘shiladi:
ng-untouchedMaydonga hali tegilmaganng-touchedMaydonga tegilganng-pristineMaydon hali o‘zgartirilmaganng-dirtyMaydon o‘zgartirilganng-validMaydon mazmuni yaroqling-invalidMaydon mazmuni yaroqsizng-valid-keyHar bir validatsiya uchun bitta kalit. Masalan:ng-valid-required, bir nechta narsani tekshirish kerak bo‘lganda foydaling-invalid-keyMasalan:ng-invalid-required
Klasslar ular ifodalagan qiymat false bo‘lsa, olib tashlanadi.
Misol
Standart CSS yordamida yaroqli va yaroqsiz textarea elementlari uchun uslublarni qo‘llang:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!