AngularJS tut 6 : 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 innerHTML của phần tử với thuộc tính mô hình được chỉ định:

Thí dụ

<p ng-bind="firstname"></p>

Hãy tự mình thử »

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>

Hãy tự mình thử »

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.

các ng-modelChỉ thị

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">

Hãy tự mình thử »

Các ng-modelchỉ thị cung cấp một hai chiều ràng buộc giữa mô hình và quan điểm.

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>

Hãy tự mình thử »

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>

Hãy tự mình thử »