AngularJS-โมเดล Directive
ng-model directive ผูกค่าของการควบคุม HTML (อินพุต, เลือก, textarea) กับข้อมูลแอปพลิเคชัน
คำสั่งการสร้างแบบจำลอง
ด้วยng-modelคำสั่ง คุณสามารถผูกค่าของฟิลด์อินพุตกับตัวแปรที่สร้างใน AngularJS
ตัวอย่าง
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
การผูกสองทาง
การผูกมัดจะไปทั้งสองทาง หากผู้ใช้เปลี่ยนค่าในช่องป้อนข้อมูล คุณสมบัติ AngularJS จะเปลี่ยนค่าด้วย:
ตัวอย่าง
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
ตรวจสอบการป้อนข้อมูลของผู้ใช้
คำng-modelสั่งสามารถให้การตรวจสอบประเภทสำหรับข้อมูลแอปพลิเคชัน (หมายเลข อีเมล จำเป็น):
ตัวอย่าง
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail
address</span>
</form>
ในตัวอย่างข้างต้น สแปนจะแสดงก็ต่อเมื่อนิพจน์ในng-showแอตทริบิวต์ส่งtrueคืน
หากไม่มีคุณสมบัติในng-modelแอตทริบิวต์ AngularJS จะสร้างให้คุณ
สถานะการสมัคร
คำng-modelสั่งสามารถให้สถานะสำหรับข้อมูลแอปพลิเคชัน (ถูกต้อง สกปรก สัมผัสถูก ข้อผิดพลาด):
ตัวอย่าง
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText"
required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS Classes
คำng-modelสั่งให้คลาส CSS สำหรับองค์ประกอบ HTML ขึ้นอยู่กับสถานะ:
ตัวอย่าง
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
คำng-modelสั่งเพิ่ม/ลบคลาสต่อไปนี้ ตามสถานะของฟิลด์แบบฟอร์ม:
- ว่างเปล่า
- ของไม่ว่าง
- ของสัมผัส
- ที่ไม่มีใครแตะต้อง
- ของที่ถูกต้อง
- of-invalid
- สกปรก
- อยู่ระหว่างดำเนินการ
- ของ-เก่าแก่