NG-รูปแบบคำสั่งผูกค่าของการควบคุม HTML (input เลือก textarea) ข้อมูลแอพลิเคชัน
NG-รุ่น Directive
กับ 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> ลองตัวเอง» Two-Way เข้าเล่ม
มีผลผูกพันไปทั้งสองวิธี หากผู้ใช้เปลี่ยนค่าที่อยู่ภายในช่องใส่สถานที่ให้บริการ AngularJS จะเปลี่ยนมันคุ้มค่า:
ตัวอย่าง
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
ลองตัวเอง» ตรวจสอบผู้ใช้ป้อน
ng-model คำสั่งสามารถให้บริการประเภทการตรวจสอบสำหรับการประยุกต์ใช้ข้อมูล (หมายเลข e-mail, จำเป็น):
ตัวอย่าง
<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
ng-model คำสั่งให้เรียน CSS สำหรับองค์ประกอบ HTML ขึ้นอยู่กับสถานะของพวกเขา:
ตัวอย่าง
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myAddress" ng-model="text" required>
</form>
ลองตัวเอง» ng-model สั่งเพิ่ม / ลบชั้นเรียนต่อไปตามสถานะของสนามรูปแบบ:
- NG-ที่ว่างเปล่า
- NG-ไม่ว่างเปล่า
- NG-สัมผัส
- NG-มิได้ถูกแตะต้อง
- NG-ที่ถูกต้อง
- NG-ที่ไม่ถูกต้อง
- NG-สกปรก
- NG-อยู่ระหว่างดำเนินการ
- NG-ที่เก่าแก่