AngularJS: Data Binding trong AngularJS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Data binding trong AngularJS là sự đồng bộ giữa model và view.

Data Model

Các ứng dụng AngularJS thường có một data model. Data model là một tập hợp các dữ liệu dùng cho ứng dụng.

Ví dụ

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

HTML View

Bộ chứa HTML trong đó ứng dụng AngularJS được hiển thị gọi là view.

View truy xuất vào model và có một số cách hiển thị model data trong view.

Bạn có thể sử dụng chỉ thị ng-bind, chỉ thị này sẽ lấy dữ liệu từ thuộc tính innerHTML của phần tử để hiển thị thuộc tính model cụ thể:

Ví dụ

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

Bạn cũng có thể sử dụng hai cặp ngoặc xoắn để hiển thị nội dung từ model:

Ví dụ

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

Hoặc bạn cũng có thể sử dụng chỉ thị ng-model trong các điều khiển HTML để liên kết model và view.

Chỉ thị ng-model

Dùng chỉ thị ng-model để liên kết model với view trong các điều khiển HTML (input, select, textarea).

Ví dụ

<input ng-model="firstname">

Chỉ thị ng-model cung cấp hai cách liên kết giữa model và view.

Hai cách liên kết

Data binding trong AngularJS là sự đồng bộ giữa model và view.

Khi dữ liệu trong model thay đổi thì view sẽ phản ánh sự thay đổi đó, và khi dữ liệu trong view thay đổi thì model cũng được cập nhật, điều này xảy ra một cách trực tiếp và tự động để đảm bảo rằng model và view luôn luôn được update.

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>

AngularJS Controller

Các ứng dụng trong AngularJS được điều khiển bằng các controller.

Do có sự đồng bộ ngay lập tức của model và view nên controller có thể được tách hoàn toàn khỏi cơ chế view và chỉ tập trung vào dữ liệu model. Nhờ sự ràng buộc dữ liệu trong AngularJS và view sẽ phản ánh bất kỳ sự thay đổi nào trong controller.

Ví dụ:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

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

<p>Click on the header to run the "changeName" function.</p>

<p>This example demonstrates how to use the controller to change model data.</p>

</body>
</html>
» Tiếp: Controller trong AngularJS
« Trước: Model trong Angular
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!