Hiển thị dữ liệu trong 1 bảng
Hiển thị bảng với AngularJS rất đơn giản bằng cách dùng chỉ thị ng-repeat. Ví dụ sau hiển thị bảng với dữ liệu lấy từ trang dammio.php.
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("dammio.php") .then(function (response) {$scope.names = response.data.records;}); }); </script> </body> </html>
Nội dung tập tin dammio.php như sau:
{ "records":[ {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Trujillo Emparedadosy helados","City":"México D.F.","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, {"Name":"Around the Horn","City":"London","Country":"UK"}, {"Name":"B's Beverages","City":"London","Country":"UK"}, {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, {"Name":"Blondel père etfils","City":"Strasbourg","Country":"France"}, {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, {"Name":"Bon app'","City":"Marseille","Country":"France"},{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, {"Name":"Cactus Comidas parallevar","City":"Buenos Aires","Country":"Argentina"}, {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ] }
Hiển thị phong cách CSS
Để trang trí bảng đẹp, bạn cũng có thể thêm 1 số phong cách CSS như sau:
<!DOCTYPE html> <html> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("dammio.php") .then(function (response) {$scope.names = response.data.records;}); }); </script> </body> </html>
Hiển thị theo bộ lọc orderBy
Để sắp xếp bảng, chúng ta chỉ cần thêm bộ lọc orderBy như ví dụ sau.
<table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
Hiển thị bộ lọc uppercase
Thêm bộ lọc uppercase để hiển thị văn bản với chữ thường.
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country | uppercase }}</td> </tr> </table>
Hiển thị chỉ số index cho bảng ($index)
Thêm thẻ td với biến $index để hiển thị index.
<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table>
Sử dụng $even và $odd
Chúng ta có thể dùng $even, $odd để phân biệt dòng chẵn lẻ để xây dựng phong cách CSS cho các dòng này.
<table> <tr ng-repeat="x in names"> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td> <td ng-if="$even">{{ x.Name }}</td> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td> <td ng-if="$even">{{ x.Country }}</td> </tr> </table>
Kết luận: như vậy bài viết đã trình bày cho bạn cách hiển thị và trang trí bảng dùng AngularJS.
- APA:
Dammio. (2017). [AngularJS] Phần 12: Bảng AngularJS. https://www.dammio.com/2017/04/11/angularjs-phan-12-bang-angularjs.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[AngularJS] Phần 12: Bảng AngularJS},
year = {2017},
url = {https://www.dammio.com/2017/04/11/angularjs-phan-12-bang-angularjs},
urldate = {2023-12-03}
}