Liên kết dữ liệu AngularJS
Liên kết 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ô hình dữ liệu. Mô hình dữ liệu là tập hợp dữ liệu có sẵn cho ứng dụng.
Ví dụ
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
Chế độ xem HTML
Vùng chứa HTML nơi ứng dụng AngularJS được hiển thị được gọi là dạng xem.
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.
Bạn có thể sử dụng lệnh ng-bind , lệnh này sẽ liên kết InternalHTML của phần tử với thuộc tính mô hình đã chỉ định:
Bạn cũng có thể sử dụng dấu ngoặc kép {{ }} để hiển thị nội dung từ mô hình:
Hoặc bạn có thể sử dụng lệnh ng-model trên các điều khiển HTML để liên kết mô hình với dạng xem.
Chỉ thị ng-model
Sử dụng lệnh ng-model để liên kết dữ liệu từ mô hình với chế độ xem trên các điều khiển HTML (đầu vào, chọn, vùng văn bản)
Lệnh ng-model cung cấp liên kết hai chiều giữa mô hình và khung nhìn.
Ràng buộc hai chiều
Liên kết dữ liệu trong AngularJS là sự đồng bộ hóa giữa mô hình và khung nhìn.
Khi dữ liệu trong mô hình thay đổi, chế độ xem sẽ phản ánh sự thay đổi và khi dữ liệu trong chế độ xem thay đổi, mô hình cũng được cập nhật. Điều này xảy ra ngay lập tức và tự động, đảm bảo rằng mô hình và chế độ xem luôn được cập nhật.
Ví dụ
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
Hãy tự mình thử »Bộ điều khiển AngularJS
Các ứng dụng trong AngularJS được điều khiển bởi bộ điều khiển. Đọc về bộ điều khiển trong chương Bộ điều khiển AngularJS .
Do sự đồng bộ hóa ngay lập tức của mô hình và khung nhìn, bộ điều khiển có thể tách biệt hoàn toàn khỏi khung nhìn và chỉ cần tập trung vào dữ liệu mô hình. Nhờ liên kết dữ liệu trong AngularJS, chế độ xem sẽ phản ánh mọi thay đổi được thực hiện trong bộ điều khiển.
Ví dụ
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Hãy tự mình thử »