Angularjs Ng Model Directive
คำสั่ง NG-model ใช้เพื่อผูกข้อมูลแอปพลิเคชันกับค่าของคอนโทรลเลอร์ HTML (อินพุตเลือก, textarea)
คำสั่ง ng-model
NG-Model Directive เชื่อมโยงค่าของฟิลด์อินพุตกับตัวแปรที่สร้างขึ้นโดย 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"> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชัน ($ scope) {$ scope.name = "John Doe"; โดเมนไปยังคุณสมบัติของคอนโทรลเลอร์ </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"> ชื่อ: <อินพุต ng-model = "name"> <h1> คุณป้อน: {{name}} </h1> </div> <script> var app = angular.module ('myApp', []); doe ";}); </script> <p> แก้ไขค่าของกล่องอินพุตและชื่อชื่อจะได้รับการแก้ไขเช่นกัน </p> </body> </html>ผลการทำงาน:
ชื่อ:
คุณป้อน: John Doe
ปรับเปลี่ยนค่าของกล่องอินพุตและชื่อชื่อจะถูกแก้ไขด้วย
ยืนยันการป้อนข้อมูลผู้ใช้
อินสแตนซ์ 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 Directive ให้คลาส 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"> ป้อนชื่อของคุณ: <อินพุตชื่อ = "myName" ng-model = "mytext" จำเป็น> </form> <p> แก้ไขฟิลด์ข้อความและสีพื้นหลังของสถานะต่าง ๆ จะถูกส่งไปเปลี่ยน </p> <p> แอตทริบิวต์ที่ต้องการจะถูกเพิ่มลงในฟิลด์ข้อความซึ่งจำเป็นและผิดกฎหมายหากว่างเปล่า </p> </body> </html>
ผลการทำงาน:
แก้ไขฟิลด์ข้อความสีพื้นหลังของสถานะต่าง ๆ จะถูกส่งไปเปลี่ยน
ฟิลด์ข้อความได้เพิ่มคุณสมบัติที่จำเป็นซึ่งจำเป็นและผิดกฎหมายหากว่างเปล่า
คำสั่ง NG-model เพิ่ม/ลบคลาสต่อไปนี้ตามสถานะของฟิลด์ฟอร์ม:
ว่างเปล่า
ไม่ว่างเปล่า
นจี
ng-untouched
ng-valid
อวกาศ
อืม
รอ
ผู้นับถือ