Chỉ thị AngularJS-model
Lệnh 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ị mô hình hóa
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
Chỉ ng-modelthị có thể cung cấp xác thực kiểu 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 = '[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
Lệnh ng-modelnày 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:
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:
- của trống
- của-không-rỗng
- xúc động
- của sự hoang sơ
- hợp lệ
- không hợp lệ
- bẩn thỉu
- ng-đang chờ xử lý
- của-nguyên sơ