Chỉ thị ng-model liên kết giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.
Chỉ thị ng-model
Với ng-modelchỉ thị, bạn có thể liên kết giá trị của một trường đầu vào với một biến được tạo trong AngularJS.
Thí dụ
<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>
Ràng buộc hai chiều
Ràng buộc đi theo cả hai cách. Nếu người dùng thay đổi giá trị bên trong trường đầu vào, thuộc tính AngularJS cũng sẽ thay đổi giá trị của nó:
Thí dụ
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
Xác thực đầu vào của người dùng
Các ng-modelchỉ thị có thể cung cấp loại xác nhận cho dữ liệu ứng dụng (số, e-mail, bắt buộc):
Thí dụ
<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>
Trong ví dụ trên, khoảng cách sẽ chỉ được hiển thị nếu biểu thức trong ng-showthuộc tính trả về true.
Nếu thuộc tính trong ng-modelthuộc tính không tồn tại, AngularJS sẽ tạo một thuộc tính cho bạn.
Trạng thái ứng dụng
Lệnh ng-modelcó thể cung cấp trạng thái cho dữ liệu ứng dụng (hợp lệ, bẩn, chạm, lỗi):
Thí dụ
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
Các lớp CSS
Các ng-modelchỉ thị cung cấp các lớp CSS cho phần tử HTML, tùy thuộc vào tình trạng của họ:
Thí dụ
<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>
Lệnh ng-modelthêm / xóa các lớp sau, theo trạng thái của trường biểu mẫu:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine