يمكن أن يعزز Angular بشكل سلس وظائف عناصر النماذج القياسية باستخدام التوجيهات ، وسنناقش مزاياه ، بما في ذلك:
ربط البيانات ، إنشاء سمة النموذج ، نموذج التحقق ، معلومات التعليقات بعد نموذج التحقق ، سمات تعليم النموذج
أدناه نتحقق من استخدامهم من خلال الحالات:
1.
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "exampleapp"> <head> <title> التوجيه الزاوي </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/boottrap.min.css" type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <! 'false'}). length}} </span> </h3> <viv> <viv> <viv> <label for = "Action" ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه الثنائي ثنائييالي ثنائييالي ثنائييالي ثنائييالي ثنائييالي ثنائي الاتجاه الثنائي ثنائييالي ثنائي الاتجاه الثنائيية. ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه الثنائي ثنائييالي ثنائييالي ثنائييالي ثنائييالي ثنائييالي ثنائي الاتجاه الثنائي ثنائييالي ثنائي الاتجاه الثنائيية. ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه ثنائي الاتجاه الثنائي ثنائييالي ثنائييالي ثنائييالي ثنائييالي ثنائييالي ثنائي الاتجاه الثنائي ثنائييالي ثنائي الاتجاه الثنائيية. ثنائية الاتجاه ثنائيات-> <!-عندما يرسل أحد الطرفين الاستبدال ، يتغير الآخر أيضًا-> <إدخال type = "text" id = "Action" ng-model = "newtodo.action"> </viv> <viv> <sistor> </"الموقع> الموقع> الموقع: </label> <Potion> Mall </point> </soph> </div> <!-ng-click انقر فوق إضافة لإضافة العنصر-> <button ng click = "addNewItem (newTodo)"> إضافة </button> </viv> <div> <trgo> <tgo> ng-repeat = "item in todos"> <!-$ index defults to 0 ، styrement-> <td> {$ index + 1}} </td> <td> {{item.action}} </td> <td> <tded type = "checkbox" ng-model = "item.complet </viv> </viv> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // define a module tame exampleapangular.mode ( (Scope $) {// Data Model $ scope.todos = [{Action: "play ball" ، Full: false} ، {Action: "Singing" ، Complete: false} ، {Action: "Running" ، Confer $ scope.addnewitem = function (newItem) {// حدد إذا (Angular.isDefined (newItem) && Angular.isDefined (newItem.Action) && Angular.isDefined (newitem.location)) {$ scope.todos.push }) </script> </body> </html>أولاً ، يتم تعريف نطاق نموذج البيانات. بعد ذلك ، يتم ربط إجراء وموقع النموذج في العرض و Scope.Todos في النموذج باستخدام نموذج NG-MODEL للبيانات ثنائية الاتجاه.
أخيرًا ، يتم تشغيل طريقة AddNewItem () لإضافة البيانات إلى النموذج بالنقر فوق السمة.
2. شكل التحقق
قبل أن نقدم النموذج إلى الخادم ، نحتاج إلى التحقق مما إذا كانت البيانات المقدمة من المستخدم موجودة أو قانونية ، وإلا فإن تقديم بيانات عديمة الفائدة ستضيع الموارد.
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "exampleapp"> <head> <title> التوجيه الزاوي </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/boottrap.min.css" type = "text/css" href = "css/bootstrap-theme.min.css"> </style> </head> <body> <div id = "toodopanel" ng-controller = "defaultctrl"> <! ng-submit = "addUser (newUser) عندما تكون بيانات النموذج قانونية ، أرسل البيانات إلى النموذج-> <form name =" myform "novalidate ng-submit =" adduser (newUser) "> <viv> <viv> name> name: </label> <! type = "text" مطلوب ng-model = "newUser.name"> </viv> <viv> <label> البريد الإلكتروني: </label> <input name = "useremail" type = "البريد الإلكتروني" مطلوب ng-model = "newuser.email </sable> </viv> <!-g-disabled = "myform. $ invalid" لا يتوفر زر الإرسال عندما يكون من غير القانوني ملء أي من النماذج-> <button type = "إرسال" ng-disabled = "myform. $ invalid"> موافق </button> </div> </form> </viv> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> Angular.module $ scope.adduser = function (userDetails) {$ scope.message = userDetails.name + "(" + userDetails.email + ") (" + userdetails.agreed + ")أولاً ، يتم تعريف طريقة نموذج البيانات. message و adduser () لإضافة بيانات إلى النموذج. ثم تتم إضافة عناصر النموذج التحقق من صحة وسمة الاسم وسمة NG-Submit إلى العرض. ثم يربط نموذج NG-Model ذو الاتجاهين في اتجاهين الإجراء وموقع النموذج في العرض والنطاق. ترتبط todos في النموذج ، وتتطلب سمات التحقق وتستخدم نماذج البريد الإلكتروني.
ثم ، يتم تعطيل زر الإرسال. لا يمكن استخدامه إلا إذا كانت جميع بيانات النماذج قانونية. إذا كان غير قانوني ، فسيتم تعطيله (ng-suppedable = "myform. $ invalid")
أخيرًا ، يتم إرسال البيانات إلى طريقة AddUser () للنموذج من خلال سمة NG-Submit.
3.
من الأبعد عن ذلك بما يكفي بالنسبة لنا فقط للتحقق من النموذج ، لأن المستخدم مرتبك لأنه لا يعرف سبب حدوث الخطأ. لذلك ، نحتاج إلى ملاحقة المعلومات إلى المستخدم حتى يتمكنوا من فهم ما يجب ملؤه
أولا تقديم الفصول التي سيتم التحقق منها في NG
لا يوجد لدى مستخدم NG-Pristine عناصر تفاعلية تضاف إلى هذه الفئة
ng-dirty يتفاعل المستخدم مع العناصر إلى هذه الفئة
نتائج التحقق من صحة NG-Valid تتم إضافة عناصر صالحة إلى هذه الفئة
ng-invalid يتم إضافة العنصر غير الصحيح إلى هذه الفئة
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "exampleapp"> <head> <title> التوجيه الزاوي </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/boottrap.min.css" type = "text/css" href = "css/bootstrap-theme.min.css"> <style>/*styledactive and style*/form.validate .ng-invalid-required.ng-dirty {background-color: Orange ؛ } /*التفاعل هو نمط غير قانوني* / form .ng-invalid.ng-dirty {background-color: lightpink ؛ } /*البريد الإلكتروني غير قانوني وتفاعل مع* / form.validate .ng-invalid-email.ng-dirty {background-color: lightgoldenrodyellow ؛ } div.error {color: red ؛ خط الرصيف: جريئة ؛ } div.summary.ng-valid {color: Green ؛ خط الرصيف: جريئة ؛ } div.summary.ng-invalid {color: red ؛ خط الرصيف: جريئة ؛ } </style> </head> <body> <!-الحالة: ربط البيانات ثنائية الاتجاه-> <div ng-controller = "defaultCtrl"> <!-novalidate = "novalidate" Just ng form. القانوني ، showvalidation صحيح ، الذي يؤدي إلى فئة ng إلى التحقق-> <form name = "myform" novalidate = "novalidate" ng-submit = "adduser (newUser)" ng-class = "showvalidation؟ "التحقق من صحة": "" "> <viv> <viv> <label> البريد الإلكتروني: </label> <input name =" البريد الإلكتروني "type =" البريد الإلكتروني "مطلوب =" مطلوب "ng-model =" newUser.email "> <! {{geterror (myform.email. $ eror)}} </span> </viv> </viv> <button type = "submit"> ok </butting> message: {{message}} <!-عندما يكون MyForm. ng-class = "myform. $ صالح؟ 'ng-valid': 'ng-invalid' "> alvter exampleAppangular.Module ("exampleapp" ، []) + ") (" + userDetails.Agreed + ")" {if (error.required) {return "الرجاء إدخال قيمة" ؛أولاً ، حدد نمط معلومات التعليقات وأسلوب التحقق من النماذج بأناقة
ثم اكتب ملاحظات المعلومات عند كتابة الخطأ في JS
أخيرًا ، قم بربط فئة NG في العرض
4. خصائص تعليمات النموذج
1. استخدم عنصر الإدخال
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "exampleapp"> <head> <title> التوجيه الزاوي </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/boottrap.min.css" type = "text/css" href = "css/bootstrap-theme.min.css"> </style> </head> <body> <div id = "toopanel" ng-required = "requirevalue" القيمة المطلوبة من خلال ربط البيانات-> <!-ng-minlength = "3" ng-maxlength = "10" أحرف الحد الأقصى والحد الأدنى المسموح بها-> <!-ng-pattern = "matchpattern" ng-nate- ng-maxlength = "10" ng-pattern = "matchpattern"> </viv> </viv> <viv> <!-مطلوب-> <p> خطأ مطلوب: {{myform.sample. $ error.required}} </p> <! خطأ: {{myform.sample. $ error.maxlength}} </p> <!-تطابق الأحرف الصغيرة فقط-> <p> خطأ في نمط: {{myform.sample. $ error.pattern}} </p> <!- type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // define وحدة نمطية تحمل اسم exampleapangular.module ("defaultctrl" ، $ scope.requirevalue = true ؛2. حدد القائمة
<! doctype> <!-استخدم الوحدة النمطية-> <html ng-app = "exampleapp"> <head> <title> التوجيه الزاوي </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/boottrap.min.css" type = "text/css" href = "css/bootstrap-theme.min.css"> </style> </head> <body> <div id = "toDOpanel" item.id as item. {{selectValue || "none"}} </p> </viv> </form> </viv> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> // define a module sample.module ( .Controller ('DefaultCtrl' ، function ($ scope) {// data data $ scope.todos = [{id: 100 ، place: "school" ، action: }) </script> </body> </html>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.