Ràng buộc (trói) dữ liệu trong AngularJS là sự đồng bộ giữa mô hình và view (giao diện).
Mô hình dữ liệu
Các ứng dụng AngularJS thường có 1 mô hình dữ liệu. Mô hình này là 1 tập dữ liệu sẵn có dành cho ứng dụng.
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "Dammio"; $scope.lastname = "Com"; });
HTML View
Ứng dụng AngularJS được hiển thị ở view. View chứa truy cập đến mô hình, và có vài cách hiển thị dữ liệu mô hình ở view. Chúng ta có thể sử dụng chỉ thị ng-bind để trói thuộc tính innerHTML của phần tử với thuộc tính mô hình cụ thể. Ví dụ sau dùng ng-bind để hiển thị giá trị thuộc tính firstname từ mô hình.
<div ng-app="myApp" ng-controller="myCtrl"> <p ng-bind="firstname"></p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "Dammio"; $scope.lastname = "Ta"; }); </script>
Chỉ thị ng-model
Chỉ thị ng-model dùng để trói dữ liệu từ mô hình với view trên các điều khiển HTML (input, select, textarea). Chỉ thị ng-model cung cấp cách ràng buộc (trói) dữ liệu 2 chiều giữa mô hình và view.
Ràng buộc hai chiều
Khi dữ liệu ở mô hình thay đổi, view sẽ phản ánh sự thay đổi đó, và khi dữ liệu ở view 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 mô hình và view được cập nhật mọi lúc. Trong ví dụ sau, người dùng nhập vào dữ liệu cho trường firstname, sau đó mô hình sẽ được cập nhật giá trị này.
<div ng-app="myApp" ng-controller="myCtrl"> Tên: <input ng-model="firstname"> <h1>{{firstname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "Dammio"; $scope.lastname = "Ta"; }); </script>
Điều khiển AngularJS
Các ứng dụng ở AngularJS được kiểm soát bởi các điều khiển. Bởi ví có sự đồng bộ tức thời giữa mô hình và view, các điều khiển có thể hoàn toàn riêng biệt với view, và đơn giản là tập trung vào dữ liệu mô hình. Với ràng buộc dữ liệu ở AngularJS, view có thể phản ánh bất cứ thay đổi nào ở điều khiển.
<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"; } });
Kết luận: bài này giúp các bạn tìm hiểu về cách ràng buộc dữ liệu trong AngularJS thông qua các ví dụ.
- APA:
Dammio. (2017). [AngularJS] Phần 6: Ràng buộc dữ liệu trong AngularJS. https://www.dammio.com/2017/02/23/angularjs-phan-6-rang-buoc-du-lieu-trong-angularjs.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[AngularJS] Phần 6: Ràng buộc dữ liệu trong AngularJS},
year = {2017},
url = {https://www.dammio.com/2017/02/23/angularjs-phan-6-rang-buoc-du-lieu-trong-angularjs},
urldate = {2025-02-07}
}