inputChỉ thị AngularJS
Thí dụ
Trường đầu vào có ràng buộc dữ liệu:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Định nghĩa và Cách sử dụng
AngularJS sửa đổi hành vi mặc định của <input>các phần tử, nhưng chỉ khi ng-modelthuộc tính có mặt.
Chúng cung cấp ràng buộc 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ụ: một <input>phần tử có requiredthuộc tính, có $validtrạng thái được đặt
falsemiễ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:
$untouchedLĩnh vực này vẫn chưa được chạm vào$touchedLĩnh vực này đã được chạm vào$pristineTrường vẫn chưa được sửa đổi$dirtyTrường đã được sửa đổi$invalidNội dung trường không hợp lệ$validNộ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à 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 ng-modelthuộc tính.
Các lớp CSS
<input>các phần tử bên trong ứng dụng AngularJS được cung cấp các 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-untouchedLĩnh vực này vẫn chưa được chạm vàong-touchedLĩnh vực này đã được chạm vàong-pristineTrường vẫn chưa được sửa đổing-dirtyTrường đã được sửa đổing-validNội dung trường hợp lệng-invalidNội dung trường không hợp lệng-valid-keyMột khóa cho mỗi lần xác thực. Ví dụ:,ng-valid-requiredhữu ích khi có nhiều thứ phải được xác thựcng-invalid-keyThí dụ:ng-invalid-required
Các lớp bị loại bỏ nếu giá trị mà chúng đại diện là false.
Thí 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 chuẩn:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>