Chỉ thị ng-model của AngularJS
Lệnh ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, vùng văn bản) với dữ liệu ứng dụng.
Chỉ thị ng-model
Với lệnh ng-model
, bạn có thể liên kết giá trị của trường đầu vào 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>
Hãy tự mình thử »Ràng buộc hai chiều
Sự 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ó:
Ví dụ
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
Hãy tự mình thử » Xác thực đầu vào của người dùng
Lệnh ng-model
có thể cung cấp xác thực loại cho dữ liệu ứng dụng (số, e-mail, bắt buộc):
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>
Hãy tự mình thử » Trong ví dụ trên, span sẽ chỉ được hiển thị nếu biểu thức trong thuộc tính ng-show
trả về true
.
Nếu thuộc tính trong thuộc tính ng-model
không tồn tại, AngularJS sẽ tạo một thuộc tính cho bạn.
Trạng thái đơn đăng ký
Lệnh ng-model
có thể cung cấp trạng thái cho dữ liệu ứng dụng (hợp lệ, bẩn, 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>
Hãy tự mình thử »Lớp CSS
Lệnh ng-model
cung cấp các lớp CSS cho các phần tử HTML, tùy 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>
Hãy tự mình thử » Lệnh ng-model
thêm/xóa các lớp sau, tùy theo trạng thái của trường biểu mẫu:
- ng-trống
- ng-không-trống
- ng-chạm vào
- ng-không bị ảnh hưởng
- ng-hợp lệ
- ng-không hợp lệ
- ng-bẩn
- đang chờ xử lý
- ng-nguyên sơ