مثال
حقل الإدخال مع ربط البيانات:
<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>
انها محاولة لنفسك »