Cách sử dụng “ng-model” trong AngularJS với VÍ DỤ
James Hartman
Ng-model trong AngularJs là gì?
ng-model là một lệnh trong Angular.JS đại diện cho các mô hình và mục đích chính của nó là liên kết “chế độ xem” với “mô hình”.
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, yêu cầu người dùng nhập "Tên" và "Họ" vào hộp văn bản. 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 mình.
Bạn có thể sử dụng chỉ thị ng-model để ánh xạ các trường hộp văn bản “Tên” và “Họ” vào mô hình dữ liệu của bạn.
Chỉ thị ng-model sẽ đảm bảo rằng dữ liệu trong “view” và dữ liệu trong “model” của bạn được đồng bộ trong toàn bộ thời gian.
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 khung nhìn được trình bày cho người dùng.
Thuộc tính ng-model được sử dụng cho,
- Liên kết các điều khiển 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 hành vi xác thực – ví dụ, có thể thêm xác thực vào hộp văn bản để chỉ có thể nhập ký tự số vào hộp văn bản.
- Thuộc tính ng-model duy trì trạng thái của control (Theo trạng thái, chúng tôi muốn nói rằng control và dữ liệu phải luôn được đồng bộ hóa. Nếu giá trị dữ liệu của chúng tôi thay đổi, nó sẽ tự động thay đổi giá trị trong control và ngược lại)
Cách sử dụng mô hình ng
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ị ở phông chữ có chiều rộng cố định.
Vì vậy, bây giờ hãy xem một ví dụ đơn giản về cách chúng ta có thể thêm lệnh 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ể chuyển một chuỗi nhiều dòng từ bộ điều khiển sang dạng xem và đính kèm giá trị đó vào điều khiển vùng văn bản.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
Giải thích mã:
- chỉ thị ng-model được sử dụng để đính kèm biến thành viên có tên là “pDescription” vào điều khiển “vùng văn bản”. “pDescription” thực sự sẽ chứa văn bản, văn bản này sẽ được chuyển đến bộ đ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 vùng văn bản là row=4 và cols=50. Các thuộc tính này đã được đề cập để chúng ta 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, vùng văn bản giờ đây sẽ có 4 hàng và 50 cột để 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ó tên là “pDescription” và đặt giá trị chuỗi cho biến.
- Lưu ý rằng chúng ta đang đặt chữ /n trong chuỗi để văn bản có thể có 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, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ rằng giá trị được gán cho pDescriptbiến ion như một phần của đối tượng phạm vi đã được chuyển đến điều khiển vùng văn bản.
- Sau đó, nó đã được hiển thị khi trang được tải.
2) Yếu tố đầu vào
Chỉ thị 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 cùng 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 “textbox” và “checkbox”.
Ở đây chúng ta sẽ có kiểu nhập văn bản 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
Giải thích mã:
- chỉ thị ng-model được sử dụng để đính kèm biến thành viên có tên “pname” vào điều khiển văn bản loại đầu vào. Biến “pname” sẽ chứa văn bản “Guru99” sẽ được chuyển đến bộ đ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 ta đang định nghĩa hộp kiểm đầu tiên “Controllers” được đính kèm vào biến thành viên Topics.Controllers. Hộp kiểm sẽ được đánh dấu cho điều khiển kiểm tra này.
- Ở đây chúng ta đang định nghĩa hộp kiểm đầu tiên “Models” được đính kèm vào biến thành viên Topics.Models. Hộp kiểm sẽ không được đánh dấu cho điều khiển kiểm tra này.
- Ở đây chúng tôi đang đính kèm biến thành viên có tên là “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à truyền cho nó hai giá trị, giá trị đầu tiên là "true" và giá trị 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, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ 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ó đã vượt qua, hộp kiểm đượ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à sai, hộp kiểm không được đánh dấu cho hộp kiểm “Mô hình”.
3) Chọn phần tử từ Dropdown
Lệnh ng-model cũng có thể được áp dụng cho phần tử select và được sử dụng để điền các mục danh sách vào 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 loại đầu vào được chọn.
Ở đây chúng ta sẽ có một kiểu nhập văn bản có tên là “Guru99” và sẽ có một danh sách chọn lọc với 2 mục danh sách là “Controller” và “Models”.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- chỉ thị ng-model được sử dụng để đính kèm biến thành viên có tên là Chủ đề trực tuyến vào điều khiển loại chọn. 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 ta định nghĩa biến mảng Topics chứa 2 cặp khóa-giá trị. Cặp đầu tiên có giá trị là “Controllers” và cặp thứ hai có giá trị là “Models”. Các giá trị này sẽ được truyền vào thẻ select input trong view. Nếu code được thực thi thành công, Output sau sẽ được hiển thị.
Đầu ra:
Từ đầu ra, có thể thấy 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 “Bộ điều khiển” và “Mô hình”.
Tổng kết
- Các mô hình trong Angular JS được thể hiện bằng lệnh ng-model. Mục đích chính của lệnh này là liên kết khung nhìn với mô hình. Cách xây dựng 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.
- Lệnh 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 truyề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 khi chạy.
- Lệnh 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.
