Angular สามารถปรับปรุงการทำงานขององค์ประกอบรูปแบบมาตรฐานได้อย่างราบรื่นโดยใช้คำสั่งและเราจะหารือเกี่ยวกับข้อดีของมันรวมถึง:
การเชื่อมโยงข้อมูล, การสร้างแอตทริบิวต์แบบจำลอง, แบบฟอร์มการตรวจสอบ, ข้อมูลข้อเสนอแนะหลังแบบฟอร์มการตรวจสอบ, แอตทริบิวต์คำสั่งแบบฟอร์ม
ด้านล่างเราตรวจสอบการใช้งานของพวกเขาผ่านกรณี:
1. การเชื่อมโยงข้อมูลแบบสองทิศทาง (NG-Model) และรูปแบบการสร้างคุณสมบัติ
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> Directive Angular </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = " type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <!-กรณี: การเชื่อมข้อมูลแบบสองทิศทาง-> <div ng-controller = "defaultctrl"> <! 'false'}). ความยาว}} </span> </h3> <div> <div> <div> <label for = "การกระทำ"> การกระทำ: </label> <! สองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทาง สองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทาง สองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทิศทางสองทาง สองทิศทาง Bi-> <!-เมื่อฝ่ายใดฝ่ายหนึ่งส่งการแทนที่อีกฝ่ายหนึ่งยังเปลี่ยนไป-> <อินพุตประเภท = "ข้อความ" id = "การกระทำ" ng-model = "newtodo.action"> </div> <div> <label for = "location"> </label> <select id = "ตำแหน่ง <petion> ห้างสรรพสินค้า </petion> </select> </div> <!-ng-click คลิกเพิ่มเพื่อเพิ่มรายการ-> <button ng-click = "addNewItem (newTodo)"> เพิ่ม </button> </div> <div> <table> <thead> ng-repeat = "รายการใน todos"> <!-$ ดัชนีค่าเริ่มต้นเป็น 0, เพิ่ม-> <td> {{$ index + 1}} </td> <td> {{item.action}} </td> <td> </div> </div> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> // กำหนดโมดูลที่ชื่อ ExampleAppangular.module ("ExampleApp" // data model $ scope.todos = [{action: "Play Ball", Complete: False}, {Action: "Singing", Complete: False}, {Action: "Running", Complete: True}, {Action: "Dance", Complete: TRUE}, {Action: "ว่ายน้ำ" $ scope.addNewItem = function (newItem) {// ตรวจสอบว่า (angular.isdefined (newItem) && angular.isdefined (newItem.action) && Angular.isdefined (newItem.location) {$ scope.todos.push }) </script> </body> </html>ขั้นแรกให้ใช้วิธีโมเดลข้อมูล TODOS และวิธี AddNewItem () เพื่อเพิ่มข้อมูลลงในโมเดล จากนั้นการกระทำและที่ตั้งของแบบฟอร์มในมุมมองและขอบเขตโสโดสในโมเดลจะถูกผูกไว้โดยใช้ข้อมูลสองทางที่มีผลผูกพัน NG-โมเดล
ในที่สุดวิธี AddNewItem () ของการเพิ่มข้อมูลลงในโมเดลจะถูกเรียกใช้โดยคลิกที่แอตทริบิวต์
2. แบบฟอร์มการตรวจสอบ
ก่อนที่เราจะส่งแบบฟอร์มไปยังเซิร์ฟเวอร์เราต้องตรวจสอบว่าข้อมูลที่ส่งโดยผู้ใช้มีอยู่หรือถูกกฎหมายหรือไม่หรือการส่งข้อมูลที่ไร้ประโยชน์จะสูญเสียทรัพยากร
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> Directive Angular </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = " type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "todopanel" ng-controller = "defaultCtrl"> <! ng-submit = "adduser (newUser) เมื่อข้อมูลแบบฟอร์มถูกกฎหมายส่งข้อมูลไปยังโมเดล-> <form name =" myform "novalidate ng-submit =" adduser (newuser) "> <div> <divel name = "username" type = "text" ต้องการ ng-model = "newuser.name"> </div> <darm> <dable> อีเมล: </label> <name input = "useremail" type = "อีเมล" ที่ต้องการ ng-model = "newuser.email" ข้อกำหนดและเงื่อนไข </label> </div> <!-g-disabled = "myform. $ ไม่ถูกต้อง" ปุ่มส่งไม่สามารถใช้ได้เมื่อมันผิดกฎหมายที่จะกรอกแบบฟอร์มใด ๆ-> <button type = "ส่ง" ng-disabled = "myform. </div> </form> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> angular.module ("ExampleApp", []). controller ("defaultctrl" $ scope.adduser = function (userDetails) {$ scope.message = userDetails.name + "(" + userDetails.email + ") (" + userDetails.agreed + ")";ขั้นแรกให้ใช้วิธีโมเดลข้อมูล Message และ Adduser () เพื่อเพิ่มข้อมูลลงในโมเดล จากนั้นองค์ประกอบแบบฟอร์มตรวจสอบคุณสมบัติแอตทริบิวต์ชื่อและแอตทริบิวต์ NG-Submit จะถูกเพิ่มลงในมุมมอง จากนั้นการเชื่อมโยงข้อมูลสองทาง NG-model เชื่อมโยงการกระทำและตำแหน่งของแบบฟอร์มในมุมมองและขอบเขต Todos ในแบบจำลองจะถูกผูกไว้และจำเป็นต้องใช้แอตทริบิวต์การตรวจสอบและใช้แบบฟอร์มอีเมล
จากนั้นปุ่มส่งจะถูกปิดใช้งาน สามารถใช้ได้เฉพาะในกรณีที่ข้อมูลแบบฟอร์มทั้งหมดถูกกฎหมาย หากผิดกฎหมายจะถูกปิดใช้งาน (ng-disabled =” myform. $ ไม่ถูกต้อง”)
ในที่สุดข้อมูลจะถูกส่งไปยังวิธี Adduser () ของโมเดลเสร็จสมบูรณ์ผ่านแอตทริบิวต์ NG-Submit
3. ข้อมูลข้อเสนอแนะการตรวจสอบแบบฟอร์ม
มันอยู่ไกลพอสำหรับเราที่จะตรวจสอบแบบฟอร์มเพราะผู้ใช้สับสนเพราะเขาไม่รู้ว่าทำไมข้อผิดพลาดเกิดขึ้น ดังนั้นเราจำเป็นต้องตอบกลับข้อมูลให้กับผู้ใช้เพื่อให้พวกเขาสามารถเข้าใจสิ่งที่ต้องกรอก
ก่อนแนะนำชั้นเรียนที่จะตรวจสอบใน NG
ผู้ใช้ NG-Pristine ไม่มีองค์ประกอบแบบโต้ตอบเพิ่มในคลาสนี้
ng-dirty ผู้ใช้โต้ตอบกับองค์ประกอบจะถูกเพิ่มลงในคลาสนี้
ผลการตรวจสอบความถูกต้องของ ng-valid องค์ประกอบที่ถูกต้องจะถูกเพิ่มในคลาสนี้
ng-invalid องค์ประกอบที่ไม่ถูกต้องจะถูกเพิ่มในคลาสนี้
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> Directive Angular </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = " type = "text/css" href = "css/bootstrap-theme.min.css"> <style>/*รูปแบบการโต้ตอบและต้องการ*/form.validate .ng-invalid-required.ng-dirty {พื้นหลังสี: สีส้ม; } /*การโต้ตอบเป็นสไตล์ที่ผิดกฎหมาย* / ฟอร์ม. ng-invalid.ng-dirty {พื้นหลังสี: LightPink; } /*อีเมลผิดกฎหมายและโต้ตอบกับ* / form.validate .ng-invalid-email.ng-dirty {พื้นหลังสี: Lightgoldenrodyellow; } div.error {สี: สีแดง; Font-Weight: ตัวหนา; } div.summary.ng-valid {color: green; Font-Weight: ตัวหนา; } div.summary.ng-invalid {color: red; Font-Weight: ตัวหนา; } </style> </head> <body> <!-กรณี: การเชื่อมข้อมูลแบบสองทิศทาง-> <div ng-controller = "defaultctrl"> <!-novalidate = "novalidate" เพียงแค่การตรวจสอบรูปแบบ ng-> <! กฎหมาย, การแสดงความเป็นจริงเป็นจริงซึ่งกระตุ้นให้ ng-class ตรวจสอบ-> <form name = "myform" novalidate = "novalidate" ng-submit = "adduser (newuser)" ng-class = "showvalidation? 'ตรวจสอบ': '' "> <div> <div> <dable> อีเมล: </label> <ชื่ออินพุต =" อีเมล "type =" อีเมล "ต้องการ =" ต้องการ "ng-model =" newuser.email "> <! {{getERROR (myForm.Email. $ error)}} </span> </div> </div> <button type = "ส่ง"> ตกลง </button> <div> ข้อความ: {{message}} <! ng-class = "myform. $ ถูกต้อง? 'ng-valid': 'ng-invalid' "> ถูกต้อง: {{myform. $ valid}} </div> </form> </div> <script type =" text/javascript "src =" js/angular.min.js "> </script> < ExampleAppangular.module ("ExampleApp", []) // กำหนดคอนโทรลเลอร์ชื่อ DefaultCtrl .Controller ('defaultCtrl', ฟังก์ชั่น ($ scope) {// เพิ่มข้อมูลลงในรุ่น $ scope.adduser = function (userDetails) ") (" + userDetails.agreed + ")"; {if (error.urequired) {return "โปรดป้อนค่า";ขั้นแรกให้กำหนดรูปแบบของข้อมูลข้อเสนอแนะและรูปแบบของการตรวจสอบแบบฟอร์มอย่างมีสไตล์
จากนั้นเขียนข้อเสนอแนะข้อมูลเมื่อมีการเขียนข้อผิดพลาดใน JS
ในที่สุดก็ผูก NG-Class ในมุมมอง
4. คุณสมบัติการเรียนการสอนแบบฟอร์ม
1. ใช้องค์ประกอบอินพุต
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> Directive Angular </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = " type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "todopanel" ng-controller = "defaultCtrl"> ng-required = "ต้องการค่า" ค่าที่ต้องการผ่านการเชื่อมโยงข้อมูล-> <!-ng-minlength = "3" ng-maxLength = "10" อักขระสูงสุดและต่ำสุดที่อนุญาต-> <!-ng-pattern = "matchPattern" การจับคู่ปกติ-name = "ตัวอย่าง ng-maxLength = "10" ng-pattern = "matchpattern"> </div> </div> <div> <!-ต้องการ-> <p> ข้อผิดพลาดที่ต้องการ: {{myform.sample. $ error.Required}} </p> <! <p> ข้อผิดพลาดความยาวสูงสุด: {{myform.sample. $ error.maxLength}} </p> <!-จับคู่ตัวอักษรตัวพิมพ์เล็ก-> <p> ข้อผิดพลาดรูปแบบ: {{myform.sample. $ error.pattern}} </p> </div> </form> </div> <script type = "text/javaScript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> // define โมดูลที่มีชื่อว่า ExampleAppangular.module ("ExampleApp", [] ($ scope) {$ scope.requirevalue = true;2. เลือกรายการ
<! doctype> <!-ใช้โมดูล-> <html ng-app = "ExampleApp"> <head> <title> Directive Angular </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "css" href = " type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "todopanel" ng-controller = "defaultCtrl"> เรียงลำดับ item.id เป็น item.action เปลี่ยนค่าตัวเลือก-> <!-ng-options = "item.id เป็น item.action กลุ่มโดย item.place สำหรับรายการใน todos"-> <เลือก ng-model = "selectValue" ng-options = "item.id เป็นรายการ <p> เลือก: {{selectValue || "ไม่มี"}} </p> </div> </form> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "javascript"> // define โมดูล .Controller ('defaultctrl', ฟังก์ชั่น ($ scope) {// data model $ scope.todos = [{id: 100, สถานที่: "โรงเรียน", การกระทำ: "เล่นบอล", สมบูรณ์: เท็จ}, {id: 200, สถานที่: "บ้าน", แอ็คชั่น: "การกิน" }) </script> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น