Kết hợp dữ liệu AngularJS

Gắn kết dữ liệu trong AngularJS là sự đồng bộ giữa mô hình và biểu diễn.

Mô hình dữ liệu

Ứ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ó thể sử dụng cho ứng dụng.

mô hình

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

Biểu diễn HTML

Khung HTML của ứng dụng AngularJS được gọi là biểu diễn.

Biểu diễn có thể truy cập mô hình và có nhiều cách để hiển thị dữ liệu mô hình trong biểu diễn.

Bạn có thể sử dụng ng-bind cú pháp chỉ thị, nó sẽ gắn kết innerHTML của phần tử với thuộc tính mô hình được chỉ định:

mô hình

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

Thử trực tiếp

Bạn cũng có thể sử dụng dấu ngoặc kép lớn {{ }} để hiển thị nội dung trong mô hình:

mô hình

<p>First name: {{firstname}}</p>

Thử trực tiếp

hoặc, bạn có thể sử dụng ng-model Cú pháp chỉ thị gắn kết mô hình với biểu diễn.

cú pháp chỉ thị ng-model

Sử dụng ng-model Cú pháp chỉ thị gắn kết dữ liệu trong mô hình với biểu diễn của HTML điều khiển (input, select, textarea).

mô hình

<input ng-model="firstname">

Thử trực tiếp

ng-model Cú pháp chỉ thị cung cấp gắn kết hai chiều giữa mô hình và biểu diễn.

Gắn kết hai chiều

Gắn kết dữ liệu trong AngularJS là sự đồng bộ giữa mô hình và biểu diễn.

Khi dữ liệu trong mô hình thay đổi, biểu diễn sẽ phản ánh sự thay đổi đó, và khi dữ liệu trong biểu diễn thay đổi, mô hình cũng sẽ đượ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à biểu diễn luôn được cập nhật.

mô hình

<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 = "Bill";
  $scope.lastname = "Gates";
});
</script>

Thử trực tiếp

Controller AngularJS

Ứng dụng AngularJS được điều khiển bởi điều khiển. Hãy đọc về điều khiển trong chương về Điều khiển AngularJS.

Doanh nghiệp và mô hình đồng bộ thời gian thực, điều khiển có thể tách biệt hoàn toàn với biểu diễn, chỉ cần tập trung vào dữ liệu mô hình. Do việc gắn kết dữ liệu trong AngularJS, biểu diễn sẽ phản ánh bất kỳ thay đổi nào trong điều khiển.

mô hình

<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 = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Thử trực tiếp