การอ่านที่เกี่ยวข้อง:
AngularJs บทแนะนำเบื้องต้น: AngularJs Expressions
AngularJs บทแนะนำเบื้องต้น: AngularJS Directive
ในบทช่วยสอนก่อนหน้าเกี่ยวกับนิพจน์และคำสั่งมันได้เรียนรู้ว่าโมเดล AngularJS (NG-model) สามารถผูกค่าในฟิลด์อินพุต 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" <อินพุต ng-model = "ชื่อ"> </div> </body> </html>
การเชื่อมโยงแบบสองทิศทางแบบสองทิศทางการเชื่อมโยงแบบสองทิศทางหมายถึงการเชื่อมโยงของโมเดล 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"> ชื่อ: <อินพุต ng-model = "name"> <h1> คุณป้อน: {{name}} </h1> </div> <script> var app = angular.module ('myApp', []); Snow ";}); </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"> ป้อนชื่อของคุณ: <name input = "myaddress" ng-model = "ข้อความ" ที่จำเป็น> </form> </body> </html>
ฟิลด์อินพุตเพิ่มสถานะที่ต้องการ เมื่อไม่มีอินพุตในฟิลด์อินพุตโมเดล NG จะเพิ่มสไตล์ NG-invalid ให้กับฟิลด์อินพุต มิฉะนั้นให้ลบสไตล์ NG-invalid คำสั่ง NG-Model จะเพิ่ม/ลบสไตล์ต่อไปนี้ตามสถานะของฟิลด์ฟอร์ม:-ng-empty-ng-not-appty-Ng-touched-ng-undouched-ng-valid-ng-invalid
<! 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.mail แอตทริบิวต์เป็นจริง (รูปแบบกล่องจดหมายไม่ถูกต้อง) NG-Show จะควบคุมการแสดงผลของเนื้อหา SPAN
เนื้อหาข้างต้นเป็นโมเดล AngularJS ที่แนะนำโดย Editor ให้คุณโดยการสอนเบื้องต้น AngularJS ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!