inputتوجيه AngularJS
مثال
حقل إدخال مع ربط البيانات:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
التعريف والاستخدام
AngularJS يعدل السلوك الافتراضي <input>للعناصر ، ولكن فقط في حالة وجود ng-modelالسمة.
أنها توفر ربط البيانات ، مما يعني أنها جزء من نموذج AngularJS ، ويمكن الرجوع إليها وتحديثها ، في كل من وظائف AngularJS وفي DOM.
أنها توفر التحقق من الصحة. مثال: <input>عنصر له requiredسمة ، يتم $validتعيين الحالة
falseعليه طالما أنه فارغ.
كما أنها توفر سيطرة الدولة. AngularJS يحمل الحالة الحالية لجميع عناصر الإدخال.
تحتوي حقول الإدخال على الحالات التالية:
$untouchedالحقل لم يتم لمسه بعد$touchedلقد تم لمس الميدان$pristineلم يتم تعديل الحقل بعد$dirtyتم تعديل الحقل$invalidمحتوى الحقل غير صالح$validمحتوى الحقل صالح
تمثل قيمة كل حالة قيمة منطقية ، وتكون إما true
أو false.
بناء الجملة
<input ng-model="name">
تتم الإشارة إلى عناصر الإدخال باستخدام قيمة ng-modelالسمة.
فئات CSS
<input>يتم منح العناصر الموجودة داخل تطبيق AngularJS فئات معينة . يمكن استخدام هذه الفئات لتصميم عناصر الإدخال وفقًا لحالتها.
تمت إضافة الفئات التالية:
ng-untouchedالحقل لم يتم لمسه بعدng-touchedلقد تم لمس الميدانng-pristineلم يتم تعديل الحقل بعدng-dirtyتم تعديل الحقلng-validمحتوى الحقل صالحng-invalidمحتوى الحقل غير صالحng-valid-keyمفتاح واحد لكل عملية تحقق. مثال:ng-valid-required، مفيد عندما يكون هناك أكثر من شيء يجب التحقق من صحتهng-invalid-keyمثال:ng-invalid-required
تتم إزالة الفئات إذا كانت القيمة التي تمثلها false.
مثال
تطبيق الأنماط على عناصر الإدخال الصالحة وغير الصالحة باستخدام CSS القياسي:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>