textarea
Chỉ thị AngularJS
Thí dụ
Một vùng văn bản có ràng buộc dữ liệu:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Định nghĩa và Cách sử dụng
AngularJS sửa đổi hành vi mặc định của <textarea>
các phần tử, nhưng chỉ khi ng-model
thuộ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 <textarea>
phần tử có required
thuộc tính, có $valid
trạng thái được đặt
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ử textarea.
Các trường Textarea có các trạng thái sau:
$untouched
Lĩnh vực này vẫn chưa được chạm vào$touched
Lĩnh vực này đã được chạm vào$pristine
Trường vẫn chưa được sửa đổi$dirty
Trường đã đượ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à là một trong true
hai false
.
Cú pháp
<textarea ng-model="name"></textarea>
Các phần tử Textarea đang được tham chiếu bằng cách sử dụng giá trị của ng-model
thuộc tính.
Các lớp CSS
<textarea>
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 để tạo kiểu cho các phần tử textarea theo trạng thái của chúng.
Các lớp sau được thêm vào:
ng-untouched
Lĩnh vực này vẫn chưa được chạm vàong-touched
Lĩnh vực này đã được chạm vàong-pristine
Trường vẫn chưa được sửa đổing-dirty
Trường đã được sửa đổing-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ựcng-invalid-key
Thí 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ử textarea hợp lệ và không hợp lệ, sử dụng CSS chuẩn:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>