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. 

20/10/2022 Blog Tin Học