القراءات ذات الصلة:
AngularJS التعليمي التمهيدي: تعبيرات AngularJS
AngularJS التعليمي التمهيدي: توجيه AngularJS
في البرنامج التعليمي السابق حول التعبيرات والتوجيهات ، يتم تعلم أن نموذج AngularJS (نموذج NG) يمكن أن يربط القيم في حقول إدخال 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 Snow '"> الاسم: <input ng-model =" name "> </viv> </body> </html>
يشير الارتباط ثنائي الاتجاه angularjs ربط ثنائية الاتجاه إلى ربط نموذج NG بمجال الإدخال لـ HTML ، وكذلك إلى سمات 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' ، [] الثلج "؛}) ؛ </script> <p> تعديل قيمة مربع الإدخال ، وسيتم أيضًا تعديل اسم العنوان وفقًا لذلك. </p> </body> </html>يمكن لتوجيه حالة التطبيق NG-MODEL توفير قيم الحالة لبيانات التطبيق.
قذرة عند تعديل البيانات ، تكون الحالة صحيحة ، ولم يتم تعديلها إلى خطأ. حتى لو تم تعديلها إلى القيمة الأصلية ، فهذا صحيح.
صالحة قيمة الإدخال صحيحة عندما تكون قانونية ، وخطأ إذا لم تكن قانونية.
لم يلمسه الشاشة التي تعمل باللمس إلى النقر كما هو الحال ، دون لمس كاذبة.
تطبيق أنماط CSS وفقًا للحالة
<! 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> <body> <form ng-app = "" name = "myform"> أدخل اسمك: <input name = "myaddress" ng-model = "text" مطلوب> </form> </body> </html>
يضيف حقل الإدخال الحالة المطلوبة. عندما لا يكون هناك إدخال في حقل الإدخال ، يضيف نموذج NG النمط NG-Invalid إلى حقل الإدخال. خلاف ذلك ، قم بإزالة نمط NG-Invalid. يضيف توجيه NG-Model/يزيل الأنماط التالية وفقًا لحالة حقل النموذج:-ng-repty-ng-not-repty-ng-touched-ng-touched-ng-valid-ng-invalid-ng-dirty-ng-pending-ng-pristine use ng model to thepox the mail
<! 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> </body> </html>
عندما يكون MyForm.MyAddress. $ error.email سمة صحيح (تنسيق صندوق البريد غير صحيح) ، سيتحكم NG-Show في عرض محتوى SPAN.
المحتوى أعلاه هو نموذج AngularJS الذي أدخله المحرر لك بواسطة برنامج AngularJS التمهيدي. آمل أن يكون ذلك مفيدًا للجميع!