Chỉ thị input
AngularJS
Ví dụ
Trường đầu vào có liên kết dữ liệu:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Hãy tự mình thử »Định nghĩa và cách sử dụng
AngularJS sửa đổi hành vi mặc định của các phần tử <input>
, nhưng chỉ khi có thuộc tính ng-model
.
Chúng cung cấp tính năng liên kết dữ liệu, có nghĩa là chúng là một phần của mô hình AngularJS và có thể được tham chiếu và cập nhật cả trong các hàm AngularJS và trong DOM.
Họ cung cấp xác nhận. Ví dụ: phần tử <input>
có thuộc tính required
, có trạng thái $valid
được đặt thành false
miễn là nó trống.
Họ cũng cung cấp sự kiểm soát của nhà nước. AngularJS giữ trạng thái hiện tại của tất cả các phần tử đầu vào.
Các trường đầu vào có các trạng thái sau:
-
$untouched
Trường chưa được chạm vào -
$touched
Trường đã được chạm -
$pristine
Trường này chưa được sửa đổi -
$dirty
Trường này đã được sửa đổi -
$invalid
Nội dung trường không hợp lệ -
$valid
Nội dung trường hợp lệ
Giá trị của mỗi trạng thái đại diện cho một giá trị Boolean và có thể là true
hoặc false
.
Cú pháp
<input ng-model=" name ">
Các phần tử đầu vào đang được tham chiếu bằng cách sử dụng giá trị của thuộc tính ng-model
.
Lớp CSS
Các phần tử <input>
bên trong ứng dụng AngularJS được cấp một số lớp nhất định. Các lớp này có thể được sử dụng để định kiểu các phần tử đầu vào theo trạng thái của chúng.
Các lớp sau được thêm vào:
-
ng-untouched
Trường chưa được chạm vào -
ng-touched
Trường đã được chạm -
ng-pristine
Trường này chưa được sửa đổi -
ng-dirty
Trường đã được sửa đổi -
ng-valid
Nội dung trường hợp lệ -
ng-invalid
Nội dung trường không hợp lệ -
ng-valid- key
Một khóa cho mỗi lần xác thực. Ví dụ:ng-valid-required
, hữu ích khi có nhiều thứ phải được xác thực -
ng-invalid- key
Ví dụ:ng-invalid-required
Các lớp sẽ bị xóa nếu giá trị mà chúng đại diện là false
.
Ví dụ
Áp dụng kiểu cho các phần tử đầu vào hợp lệ và không hợp lệ, sử dụng CSS tiêu chuẩn:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Hãy tự mình thử »