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.
Thí 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à 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.
Bạn có thể sử dụng ng-bindchỉ thị, 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:
Thí dụ
<p ng-bind="firstname"></p>
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:{{ }}
Thí dụ
<p>First name: {{firstname}}</p>
Hoặc bạn có thể sử dụng ng-modelchỉ thị trên các điều khiển HTML để liên kết mô hình với dạng xem.
Chỉ ng-modelthị
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)
Thí dụ
<input ng-model="firstname">
Lệnh ng-modelcung cấp ràng buộc hai chiều giữa mô hình và khung nhìn.
Ràng buộc hai chiều
Ràng buộc 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 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 được cập nhật mọi lúc.
Thí 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>
Bộ điều khiển AngularJS
Các ứng dụng trong AngularJS được kiểm soát 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ể được 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 bất kỳ thay đổi nào được thực hiện trong bộ điều khiển.
Thí 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>