Mục lục bài viết
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-model
có 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-model
thê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.
325 lượt xem20/10/2022 Blog Tin Học