12/08/2018, 13:03
Tìm Hiểu AngularJS - Tables (P6)
Như đã nói ở những phần đầu thì sườn bài của loạt seri tìm hiểu về AngularJS này mình dựa vào sườn bài của AngularJS Tutorial trên trang w3schools.com để các bạn tiện theo dõi. Bài viết lần này ta sẽ cùng nhau tìm hiểu về table, nhưng thật ra phần này là sử dụng lại các kiến thức của những phần ...
- Như đã nói ở những phần đầu thì sườn bài của loạt seri tìm hiểu về AngularJS này mình dựa vào sườn bài của AngularJS Tutorial trên trang w3schools.com để các bạn tiện theo dõi.
- Bài viết lần này ta sẽ cùng nhau tìm hiểu về table, nhưng thật ra phần này là sử dụng lại các kiến thức của những phần trước khá nhiều, chủ yếu là dùng các Derictives để hiển thị table, sort, filter data...
- Do vậy nếu bạn chưa đọc qua các phần trước thì bớt chút thời gian xem lại nhé, bài này phần lớn là ôn tập và nâng cao của bài Tìm Hiểu AngularJS - Filters (P4)
Normal Table
- Để hiển thị dữ liệu của bảng ta sử dụng derictive ng-repeat, cụ thể ta làm như sau:
<!DOCTYPE html> <html lang='en'> <head> <meta charset="utf8"> <title>AngularJS Table</title> <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.3.15/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, filterFilter) { $scope.students = [ {name:'Lien',address:'Ha Noi'}, {name:'Linh',address:'Can Tho'}, {name:'Thu',address:'Da Nang'}, {name:'Hoa',address:'Hai Phong'}, {name:'Nga',address:'Phu Tho'}, {name:'Loan',address:'Ha Noi'} ]; }); </script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <table> <tr ng-repeat="x in students"> <td>{{ $index + 1 }}</td> <td>{{ x.name }}</td> <td>{{ x.address }}</td> </tr> </table> </div> </body> </html>
- Kết quả thu được như sau:
- Xem demo ví dụ này.
- $index là biến đếm do AngularJS tạo ra.
- Hoặc ta có thể dùng $even và $odd để thu được kết quả tương tự:
<body> <div ng-app="myApp" ng-controller="myCtrl"> <table> <tr ng-repeat="x in students"> <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.address }}</td> <td ng-if="$even"> {{ x.address }}</td> </tr> </table> </div> </body>
Xem demo ví dụ này.
- Ở đây $odd và $even cũng giống như $index là các thuộc tính đặc biệt được angularJS thiết lập cho directive ng-repeat. Cụ thể trong bảng dưới đây:
| Biến | Kiểu | Giá trị|
| --------|:--------
