[AngularJS] Phần 12: Bảng AngularJS

Cập nhật lần cuối: 23/09/2023 lúc 09:57:52

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.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: Năm lý do nên học AngularJS

Trích dẫn bài viết

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 = {2025-12-19} }

Kết nối