Mất 2 phút đọc

Mô Hình AngularJS

1.Chỉ thị AngularJS ng-model

  • Chỉ thị ng-model liên kết giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.
  • Với chỉ thị ng-model, bạn có thể liên kết giá trị của một trường đầu vào với một biến được tạo trong AngularJS.

Ví dụ:

Ràng buộc hai chiều

  • Ràng buộc đi theo cả hai cách. Nếu người dùng thay đổi giá trị bên trong trường nhập, thuộc tính AngularJS cũng sẽ thay đổi giá trị của nó:

Xác thực đầu vào của người dùng

  • Chỉ thị ng-model có thể cung cấp xác thực kiểu cho dữ liệu ứng dụng (số, e-mail, bắt buộc):

Trong ví dụ trên, khoảng cách sẽ chỉ được hiển thị nếu biểu thức trong thuộc tính ng-show trả về true.

  • Nếu thuộc tính trong ng-model không tồn tại, AngularJS sẽ tạo một thuộc tính cho bạn.

Trạng thái ứng dụng

  • Lệnh ng-modelcó thể cung cấp trạng thái cho dữ liệu ứng dụng (hợp lệ, bẩn, chạm, lỗi)

Các lớp CSS

  • Chỉ thị ng-model cung cấp các lớp CSS cho các phần tử HTML, tùy thuộc vào trạng thái của chúng

  • Lệnh ng-modelthêm / xóa các lớp sau, theo trạng thái của trường biểu mẫu:
    • ng-empty
    • ng-not-empty
    • ng-touched
    • ng-untouched
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pending
    • ng-pristine

2.AngularJS Data Binding

  • Ràng buộc dữ liệu trong AngularJS là sự đồng bộ hóa giữa mô hình và khung nhìn.

Mô hình dữ liệu

  • Các ứng dụng AngularJS thường có một mô hình dữ liệu. Mô hình dữ liệu là một tập hợp dữ liệu có sẵn cho ứng dụng.

Chế độ xem HTML

  • Vùng chứa HTML nơi ứng dụng AngularJS được hiển thị, được gọi là khung nhìn.
  • Chế độ xem có quyền truy cập vào mô hình và có một số cách hiển thị dữ liệu mô hình trong chế độ xem.
  • Có thể sử dụng chỉ thị ng-bind, lệnh này sẽ liên kết nộiHTML của phần tử với thuộc tính mô hình được chỉ định

  • Cũng có thể sử dụng dấu ngoặc kép để hiển thị nội dung từ mô hình:{{ }}

Kết Luận: Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. 

Hãy bình chọn
55 lượt xem

20/10/2022 Blog Tin Học

Bài viết liên quan

Block "5_tab_footer" not found