Ng-model trong AngularJs là gì?
ng-model là một chỉ thị trong Angular.JS đại diện cho các mô hình và mục đích chính của nó là để ràng buộc "view" với "model".
Ví dụ: giả sử bạn muốn trình bày một trang đơn giản cho người dùng cuối như trang được hiển thị bên dưới, trang này yêu cầu người dùng nhập "Tên" và "Họ" vào hộp văn bản. Và sau đó, bạn muốn đảm bảo rằng bạn lưu trữ thông tin mà người dùng đã nhập vào mô hình dữ liệu của bạn.
Bạn có thể sử dụng lệnh ng-model để ánh xạ các trường hộp văn bản của "First name" và "Last Name" với mô hình dữ liệu của bạn.
Lệnh ng-model sẽ đảm bảo rằng dữ liệu trong "chế độ xem" và dữ liệu trong "mô hình" của bạn được giữ đồng bộ trong toàn bộ thời gian.
Trong hướng dẫn này, bạn sẽ học-
- Thuộc tính ng-model
- Cách sử dụng ng-model
- Vùng văn bản
- Yếu tố đầu vào
- Chọn biểu mẫu phần tử thả xuống
Thuộc tính ng-model
Như đã thảo luận trong phần giới thiệu của chương này, thuộc tính ng-model được sử dụng để liên kết dữ liệu trong mô hình của bạn với dạng xem được trình bày cho người dùng.
Thuộc tính ng-model được sử dụng cho,
- Các điều khiển ràng buộc như đầu vào, vùng văn bản và các lựa chọn trong chế độ xem vào mô hình.
- Cung cấp một hành vi xác thực - ví dụ: một xác thực có thể được thêm vào hộp văn bản mà chỉ các ký tự số mới có thể được nhập vào hộp văn bản.
- Thuộc tính ng-model duy trì trạng thái của điều khiển (Theo trạng thái, chúng tôi có nghĩa là điều khiển và dữ liệu bị ràng buộc phải luôn được giữ đồng bộ. Nếu giá trị dữ liệu của chúng ta thay đổi, nó sẽ tự động thay đổi giá trị trong điều khiển và ngược lại)
Cách sử dụng ng-model
1) Vùng văn bản
Thẻ vùng văn bản được sử dụng để xác định điều khiển nhập văn bản nhiều dòng. Vùng văn bản có thể chứa số lượng ký tự không giới hạn và văn bản hiển thị bằng phông chữ có chiều rộng cố định.
Vì vậy, bây giờ chúng ta hãy xem xét một ví dụ đơn giản về cách chúng ta có thể thêm chỉ thị ng-model vào điều khiển vùng văn bản.
Trong ví dụ này, chúng tôi muốn chỉ ra cách chúng tôi có thể truyền một chuỗi nhiều dòng từ bộ điều khiển đến dạng xem và đính kèm giá trị đó vào bộ điều khiển vùng văn bản.
Event Registration Guru99 Global Event
Giải thích mã:
- Các chỉ thị ng mô hình được sử dụng để đính kèm các biến thành viên được gọi là "pDescription" để kiểm soát "textarea".
Biến "pDescription" sẽ thực sự chứa văn bản, sẽ được chuyển cho điều khiển vùng văn bản. Chúng tôi cũng đã đề cập đến 2 thuộc tính cho điều khiển textarea là row = 4 và cols = 50. Các thuộc tính này đã được đề cập để chúng tôi có thể hiển thị nhiều dòng văn bản. Bằng cách xác định các thuộc tính này, textarea bây giờ sẽ có 4 hàng và 50 cột để nó có thể hiển thị nhiều dòng văn bản.
- Ở đây chúng ta đang gắn biến thành viên vào đối tượng phạm vi được gọi là "pDescription" và đặt một giá trị chuỗi vào biến.
- Lưu ý rằng chúng ta đang đặt ký tự / n trong chuỗi để văn bản có thể gồm nhiều dòng khi nó được hiển thị trong vùng văn bản. Chữ / n chia văn bản thành nhiều dòng để nó có thể hiển thị trong điều khiển vùng văn bản dưới dạng nhiều dòng văn bản.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã trong trình duyệt.
Đầu ra:
Từ đầu ra
- Có thể thấy rõ rằng giá trị được gán cho biến pDescription như một phần của đối tượng phạm vi đã được chuyển cho điều khiển textarea.
- Sau đó, nó đã được hiển thị khi trang được tải.
2) Các yếu tố đầu vào
Lệnh ng-model cũng có thể được áp dụng cho các phần tử đầu vào như hộp văn bản, hộp kiểm, nút radio, v.v.
Hãy xem một ví dụ về cách chúng ta có thể sử dụng ng-model với kiểu đầu vào "hộp văn bản" và "hộp kiểm".
Ở đây chúng ta sẽ có kiểu nhập văn bản sẽ có tên là "Guru99" và sẽ có 2 hộp kiểm, một hộp sẽ được đánh dấu theo mặc định và hộp còn lại sẽ không được đánh dấu.
Event Registration Guru99 Global Event
Giải thích mã:
- Các chỉ thị ng mô hình được sử dụng để đính kèm các biến thành viên được gọi là "pname" với loại đầu vào kiểm soát văn bản. Biến "pname" sẽ chứa văn bản của "Guru99" sẽ được chuyển cho điều khiển nhập văn bản. Lưu ý rằng bất kỳ tên nào cũng có thể được đặt cho tên của biến thành viên.
- Ở đây chúng tôi đang xác định hộp kiểm đầu tiên của chúng tôi "Bộ điều khiển" được gắn với biến thành viên Topics.Controllers. Hộp kiểm sẽ được đánh dấu cho kiểm soát kiểm tra này.
- Ở đây chúng tôi đang xác định hộp kiểm đầu tiên của chúng tôi "Mô hình" được đính kèm với biến thành viên Topics.Models. Hộp kiểm sẽ không được đánh dấu cho kiểm soát kiểm tra này.
- Ở đây chúng tôi đang đính kèm biến thành viên có tên "pName" và đặt giá trị chuỗi là "Guru99".
- Chúng ta đang khai báo một biến mảng thành viên có tên là "Topics" và cho nó hai giá trị, giá trị đầu tiên là "true" và thứ hai là "false".
Vì vậy, khi hộp kiểm đầu tiên nhận giá trị true, hộp kiểm sẽ được đánh dấu cho điều khiển này và tương tự như vậy, vì giá trị thứ hai là false, hộp kiểm sẽ không được đánh dấu cho điều khiển này.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ rằng giá trị được gán cho biến pName là "Guru99"
- Vì giá trị kiểm tra đầu tiên là "đúng" nên nó được đánh dấu cho hộp kiểm "Bộ điều khiển". Tương tự như vậy vì giá trị thứ hai là false, hộp kiểm không được đánh dấu cho hộp kiểm "Mô hình".
3) Chọn dạng phần tử thả xuống
Chỉ thị ng-model cũng có thể được áp dụng cho phần tử được chọn và được sử dụng để điền các mục danh sách trong danh sách đã chọn.
Hãy xem một ví dụ về cách chúng ta có thể sử dụng ng-model với kiểu đầu vào được chọn.
Tại đây chúng ta sẽ có kiểu nhập văn bản sẽ có tên là "Guru99" và sẽ có danh sách chọn với 2 mục danh sách là "Controller" và "Models".
Event Registration Guru99 Global Event
- Các chỉ thị ng mô hình được sử dụng để đính kèm các biến thành viên được gọi là "Chủ đề" để chọn kiểm soát loại. Bên trong điều khiển chọn, đối với mỗi tùy chọn, chúng tôi đính kèm biến thành viên của Topics.option1 cho tùy chọn đầu tiên và Topics.option2 cho tùy chọn thứ hai.
- Ở đây, chúng tôi đang xác định biến mảng Chủ đề chứa 2 cặp khóa-giá trị. Cặp đầu tiên có giá trị là "Bộ điều khiển" và cặp thứ hai có giá trị là "Mô hình". Các giá trị này sẽ được chuyển để chọn thẻ đầu vào trong chế độ xem.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị.
Đầu ra:
Từ đầu ra, có thể thấy rằng giá trị được gán cho biến pName là "Guru99" và chúng ta có thể thấy rằng điều khiển đầu vào chọn có các tùy chọn là "Bộ điều khiển" và "Mô hình".
Tóm lược
- Các mô hình trong Angular JS được đại diện bởi chỉ thị ng-model. Mục đích chính của chỉ thị này là liên kết chế độ xem với mô hình. Cách tạo một bộ điều khiển đơn giản bằng cách sử dụng các lệnh ng-app, ng-controller và ng-model.
- Chỉ thị ng-model có thể được liên kết với điều khiển đầu vào "vùng văn bản" và các chuỗi nhiều dòng có thể được chuyển từ bộ điều khiển đến dạng xem.
- Chỉ thị ng-model có thể được liên kết với các điều khiển đầu vào như điều khiển văn bản và hộp kiểm để làm cho chúng năng động hơn trong thời gian chạy.
- Chỉ thị ng-model cũng có thể được sử dụng để điền vào danh sách lựa chọn với các tùy chọn có thể được hiển thị cho người dùng.