Chỉ thị textarea AngularJS
Ví dụ
Một vùng văn bản có liên kết dữ liệu:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</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ử <textarea> , 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ử <textarea> 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 thành phần vùng văn bản.
Các trường văn bản có các trạng thái sau:
-
$untouchedTrường chưa được chạm vào -
$touchedTrường đã được chạm -
$pristineTrường này chưa được sửa đổi -
$dirtyTrường này đã đượ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à có thể true hoặc false .
Cú pháp
<textarea ng-model=" name "></textarea> Các phần tử vùng văn bản đ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ử <textarea> 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ử vùng văn bản theo trạng thái của chúng.
Các lớp sau được thêm vào:
-
ng-untouchedTrường chưa được chạm vào -
ng-touchedTrường đã được chạm -
ng-pristineTrường này chưa được sửa đổi -
ng-dirtyTrường đã được sửa đổi -
ng-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-required, hữu ích khi có nhiều thứ phải được xác thực -
ng-invalid- keyVí 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 thành phần vùng văn bản hợp lệ và không hợp lệ, sử dụng CSS tiêu chuẩn:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>
Hãy tự mình thử »