Khóa học đề xuất:

Chỉ thị textarea của AngularJS

định nghĩa và cách sử dụng <textarea> AngularJS thay đổi ng-model mặc định của yếu tố, nhưng trên cơ sở

thuộc tính có mặt.

Họ cung cấp dữ liệu gắn kết, điều này 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 trong các hàm và DOM của AngularJS. Họ cung cấp xác thực. Ví dụ: có required <textarea> yếu tố, chỉ cần nó trống, giá trị của thuộc tính $valid trạng thái sẽ được thiết lập false.

Họ cũng cung cấp kiểm soát trạng thái. AngularJS lưu tất cả các trạng thái hiện tại của yếu tố khu vực văn bản.

Lĩnh vực khu vực văn bản có các trạng thái sau:

• $untouched Khu vực này chưa được chạm vào
• $touched Khu vực này đã được chạm vào
• $pristine Trường này chưa được thay đổi
• $dirty Trường này đã được thay đổ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ị布尔, có thể là có giá trị hoặc không có giá trị.

Mô hình

Khu vực văn bản có dữ liệu gắn kết:

<textarea ng-model="myTextarea"></textarea>
<p>Giá trị của lĩnh vực khu vực văn bản là:</p>
<h1>{{myTextarea}}</h1>

Thử ngay

cú pháp

<textarea ng-model="name"></textarea>

Bằng cách sử dụng ng-model giá trị của thuộc tính để tham chiếu đến yếu tố khu vực văn bản.

Lớp CSS

Trong ứng dụng AngularJS <textarea> Các yếu tố được gán một số lớp. Các lớp này có thể được sử dụng để thiết lập樣式 cho yếu tố khu vực văn bản dựa trên trạng thái của chúng.

Đã thêm các lớp sau đây:

• ng-untouched Khu vực này chưa được chạm vào
• ng-touched Khu vực này đã được chạm vào
• ng-pristine Trường này chưa được thay đổi
• ng-dirty Trường này đã được thay đổ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 Kiểm tra mỗi khóa một lần. Ví dụ:ng-valid-requiredrất hữu ích khi có nhiều điều kiện cần kiểm tra
• ng-invalid-key Ví dụ:ng-invalid-required

Nếu lớp đại diện cho giá trị của falsethì các lớp này sẽ bị xóa.

Mô hình

Áp dụng phong cách CSS tiêu chuẩn cho các yếu tố văn bản khu vực hợp lệ và không hợp lệ:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

Thử ngay