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.
Tóm Tắt
Chỉ thị ng-model
Với chỉ thị ng-model
bạn có thể liên kết giá trị của một trường input với một biến được tạo trong AngularJS.
Ví 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>
Hai cách liên kết
Việc liên kết có thể thực hiện theo 2 cách. Nếu người dùng thay đổi giá trị trong trường input thì thuộc tính AngularJS cũng sẽ thay đổi giá trị của nó:
Ví dụ
<div ng-app=”myApp” ng-controller=”myCtrl”>
Name: <input ng-model=”name”>
<h1>You entered: {{name}}</h1>
</div>
Kiểm tra giá trị nhập vào của người dùng
Chỉ thị ng-model
có thể cung cấp các định kiểu cho dữ liệu ứng dụng (number, e-mail, required).
Ví 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, thẻ <span> sẽ được hiển thị chỉ khi biểu thức trong thuộc tính ng-show
trả về true
.
Nếu thuộc tính trong ng-model
không có sẵn thì AngularJS sẽ tạo cho bạn.
Trạng thái ứng dụng
Chỉ thị ng-model
có thể cung cấp trạng thái cho dữ liệu ứng dụng (không hợp lệ, không đúng, chạm, lỗi):
Ví dụ
<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>
Các lớp CSS
Chỉ thị ng-model
cung cấp các lớp CSS cho các phần tử HTML phụ thuộc vào trạng thái của chúng:
Ví 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
>
Chỉ thị ng-model
sẽ thêm/xóa các lớp sau tùy thuộc vào trạng thái của trường của form:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine