AngularJS NG-Model التوجيه
يتم استخدام توجيه NG-Model لربط بيانات التطبيق بقيمة وحدة تحكم HTML (الإدخال ، SELECT ، TEXTAREA).
NG-Model Command
يربط توجيه NG-Model قيمة حقل الإدخال بمتغير تم إنشاؤه بواسطة AngularJS.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> الاسم: <input ng-model = "name"> </div> <script> var app = Angular.module ('myapp' ، []) ؛ مجال الإدخال لخصائص وحدة التحكم. </p> </body> </html>نتائج التشغيل:
اسم:استخدم توجيه NG-Model لربط قيمة حقل الإدخال بخصائص وحدة التحكم.
ربط في اتجاهين
الربط ثنائي الاتجاه ، عند تعديل قيمة حقل الإدخال ، سيتم أيضًا تعديل قيمة خاصية AngularJS:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> الاسم: <input ng-model = "name"> <h1> لقد أدخلت: {{name}} </h1> </viv> <script> var app = angular.module ('myapp' ، [] DOE "؛}) ؛ </script> <p> تعديل قيمة مربع الإدخال ، وسيتم أيضًا تعديل اسم العنوان وفقًا لذلك. </p> </body> </html>نتائج التشغيل:
اسم:
لقد دخلت: جون دو
قم بتعديل قيمة مربع الإدخال ، وسيتم أيضًا تعديل اسم العنوان وفقًا لذلك.
تحقق من إدخال المستخدم
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js name = "myaddress" ng-model = "text"> <span ng-show = "myform.myaddress. $ error.email"> ليس عنوان بريد إلكتروني قانوني </span> </form> <p> أدخل عنوان بريدك الإلكتروني في مربع الإدخال. إذا لم يكن عنوان بريد إلكتروني قانوني ، فستظهر رسالة سريعة. </p> </body> </html>
نتائج التشغيل:
بريد إلكتروني:
أدخل عنوان بريدك الإلكتروني في مربع الإدخال. إذا لم يكن عنوان بريد إلكتروني قانوني ، فستظهر رسالة سريعة.
فئة CSS
يوفر توجيه NG-Model فئة CSS لعناصر HTML بناءً على حالتها:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js LightBlue ؛} </style> </head> <body> <form ng-app = "" name = "myForm"> أدخل اسمك: <input name = "myName" ng-model = "mytext" مطلوب> </form> <p> تحرير حقول النص ، وسيتم إرسال ألوان الخلفية للوالتين المختلفة. </p> <p> تتم إضافة السمة المطلوبة إلى حقل النص ، وهو أمر مطلوب ، وهو غير قانوني إذا كان فارغًا. </p> </body> </html>
نتائج التشغيل:
تحرير حقل النص ، سيتم إرسال ألوان الخلفية لحالات مختلفة للتغيير.
أضاف حقل النص خاصية مطلوبة ، وهي مطلوبة ، وهي غير قانونية إذا كانت فارغة.
يضيف توجيه NG-Model/يزيل الفئات التالية وفقًا لحالة حقل النموذج:
نانوغرام
ng-not-repty
نغ تلمس
نانوغرام
ng-valid
NG-Invalid
ng-dirty
NG معلقة
ng-pristine