Hướng dẫn angular textarea html content - nội dung html textarea góc cạnh

Chỉ thị AngularJS textarea

Thí dụ

Textarea với liên kết dữ liệu:

Giá trị của trường TextArea là: {{mytextarea}}

{{myTextarea}}

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 thuộc tính ng-model có mặt.

Chúng cung cấp 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 đề cập 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> với 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 kiểm soát nhà nước. AngularJS giữ trạng thái hiện tại của tất cả các yếu tố Textarea.

Các trường Textarea có các trạng thái sau:

• $untouched Trường chưa được chạm vào

•   <div ng-bind-html="modelname"
           contenteditable="true"
           ng-model="modelname">
      </div>
  

  0 Trường đã được chạm vào

•   <div ng-bind-html="modelname"
           contenteditable="true"
           ng-model="modelname">
      </div>
  

  1 Trường chưa được sửa đổi

•   <div ng-bind-html="modelname"
           contenteditable="true"
           ng-model="modelname">
      </div>
  

  2 Trường đã được sửa đổi

•   <div ng-bind-html="modelname"
           contenteditable="true"
           ng-model="modelname">
      </div>
  

  3 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à

  <div ng-bind-html="modelname"
         contenteditable="true"
         ng-model="modelname">
    </div>

Cú pháp

Các phần tử TextArea đang được đề cập bằng cách sử dụng giá trị của thuộc tính ng-model.

Các lớp CSS

<textarea> Các yếu tố bên trong một ứng dụng AngularJS được cung cấp một số lớp nhất định. Các lớp này có thể được sử dụng để tạo kiểu cho các yếu tố Textarea theo trạng thái của họ.

Các lớp sau được thêm vào:

•   <div ng-bind-html="modelname"
           contenteditable="true"
           ng-model="modelname">
      </div>
  

  9 Trường chưa được chạm vào
• textarea0 Lĩnh vực đã được chạm vào
• textarea1 Trường chưa được & NBSP; sửa đổi chưa
• textarea2 Trường đã được sửa đổi
• textarea3 Nội dung trường hợp lệ
• textarea4 Nội dung trường không hợp lệ
• textarea5 Một khóa cho mỗi xác thực. Ví dụ: textarea6, hữu ích khi có nhiều hơn một thứ phải được xác nhận
• textarea7 Ví dụ: textarea8

Các lớp được loại bỏ nếu giá trị chúng đại diện là false.

Thí dụ

Áp dụng các kiểu cho các phần tử Textarea hợp lệ và không hợp lệ, sử dụng CSS tiêu chuẩn:

Hãy tự mình thử »

Tôi cần hiển thị các giá trị HTML trong biểu mẫu khu vực văn bản. Tôi có thể liên kết các giá trị HTML trong <textarea>0 nhưng không phải trong <textarea>. Ngoài ra, ng-model để liên kết dữ liệu có thể truy xuất giá trị nhưng nó được hiển thị dưới dạng HTML.

Người điều khiển

//task.descr contains "<br>-------<br><a href="http://www.google.com"..."
var str="<br><hr><br>"+ task.descr;
//str= $sce.trustAsHtml(str);
$scope.formData5 = {
    descr: str}
console.log($scope.formData5);


<textarea placeholder="Deskripsi Memo"  name="descr" 
ngMaxlength="1000" ng-model="formData5.descr" 
ng-bind-html="formData5.descr" > </textarea>

Scniro

16.6K8 Huy hiệu vàng59 Huy hiệu bạc104 Huy hiệu đồng8 gold badges59 silver badges104 bronze badges

Đã hỏi ngày 7 tháng 3 năm 2015 lúc 4:08Mar 7, 2015 at 4:08

3

Điều này sẽ cho phép bạn có cả hai liên kết dữ liệu hai chiều cũng như cung cấp cho bạn chức năng của TextArea:

  <div ng-bind-html="modelname"
         contenteditable="true"
         ng-model="modelname">
    </div>

THỬ NGHIỆM

Đã trả lời ngày 7 tháng 3 năm 2015 lúc 4:42Mar 7, 2015 at 4:42

Mohamedriasmohamedriasmohamedrias

Huy hiệu vàng 18K237 Huy hiệu bạc47 Huy hiệu đồng2 gold badges37 silver badges47 bronze badges

2

Có một thành phần trong trường Textarea lấy bất kỳ mẫu HTML/CSS/JS nào.

Tôi cần tạo bản xem trước của mẫu này với mã mẫu làm việc hợp lệ (kiểu, tập lệnh, lớp kiểu)

1. Tùy chọn đầu tiên - Một cái nạng: Chuyển hướng sang một trang khác, nhược điểm là có rất nhiều lỗi trong bảng điều khiển

   
   , the downside is that there are a lot of errors in the console

2. Tùy chọn thứ 2 là làm điều đó trong phụ trợ, tuy nhiên, không có ý tưởng làm thế nào để tiếp tục.

Tôi có một trình chỉnh sửa mã nguyên thủy

Và với nút xem trước, bạn cần hiển thị mã làm việc

1 tùy chọn hiển thị trong một thành phần khác

Hiển thị tùy chọn thứ 2 trong cửa sổ khác