参考手册
AngularJS HTTP
AngularJS Select

AngularJS 表格

ng-repeat 指令非常适合显示表格。

用表格展示数据

AngularJS 的表格显示非常简单:

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="customersCtrl">
  8. <table>
  9.   <tr ng-repeat="x in names">
  10.     <td>{{ x.Name }}</td>
  11.     <td>{{ x.Country }}</td>
  12.   </tr>
  13. </table>
  15. </div>
  17. <script>
  18. var app = angular.module('myApp', []);
  19. app.controller('customersCtrl', function($scope, $http) {
  20.     $http.get("/znadmin/md/2849/customers.json")
  21.     .then(function (response) {$scope.names = response.data.records;});
  22. });
  23. </script>
  25. </body>
  26. </html>
运行一下

用 CSS 样式展示

为了让页面更美观，可以在页面中添加一些 CSS:

CSS 样式
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, th , td  {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. table tr:nth-child(odd) {
  10.   background-color: #f1f1f1;
  11. }
  12. table tr:nth-child(even) {
  13.   background-color: #ffffff;
  14. }
  15. </style>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  17. <body>
  19. <div ng-app="myApp" ng-controller="customersCtrl">
  21. <table>
  22.   <tr ng-repeat="x in names">
  23.     <td>{{ x.Name }}</td>
  24.     <td>{{ x.Country }}</td>
  25.   </tr>
  26. </table>
  28. </div>
  30. <script>
  31. var app = angular.module('myApp', []);
  32. app.controller('customersCtrl', function($scope, $http) {
  33.     $http.get("/znadmin/md/2849/customers.json")
  34.     .then(function (response) {$scope.names = response.data.records;});
  35. });
  36. </script>
  38. </body>
  39. </html>
运行一下

使用 orderBy 过滤器显示

要对表进行排序，请添加 orderBy 过滤器:

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, th , td  {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. table tr:nth-child(odd) {
  10.   background-color: #f1f1f1;
  11. }
  12. table tr:nth-child(even) {
  13.   background-color: #ffffff;
  14. }
  15. </style>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  17. <body>
  19. <div ng-app="myApp" ng-controller="customersCtrl">
  21. <table>
  22.   <tr ng-repeat="x in names | orderBy : 'Country'">
  23.     <td>{{ x.Name }}</td>
  24.     <td>{{ x.Country }}</td>
  25.   </tr>
  26. </table>
  28. </div>
  30. <script>
  31. var app = angular.module('myApp', []);
  32. app.controller('customersCtrl', function($scope, $http) {
  33.     $http.get("/znadmin/md/2849/customers.json")
  34.     .then(function (response) {$scope.names = response.data.records;});
  35. });
  36. </script>
  38. </body>
  39. </html>
运行一下

用 uppercase 过滤器显示

要小写展示, 添加一个 uppercase 过滤器:

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, th , td  {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. table tr:nth-child(odd) {
  10.   background-color: #f1f1f1;
  11. }
  12. table tr:nth-child(even) {
  13.   background-color: #ffffff;
  14. }
  15. </style>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  17. <body>
  19. <div ng-app="myApp" ng-controller="customersCtrl">
  21. <table>
  22.   <tr ng-repeat="x in names">
  23.     <td>{{ x.Name }}</td>
  24.     <td>{{ x.Country | uppercase }}</td>
  25.   </tr>
  26. </table>
  28. </div>
  30. <script>
  31. var app = angular.module('myApp', []);
  32. app.controller('customersCtrl', function($scope, $http) {
  33.     $http.get("/znadmin/md/2849/customers.json")
  34.     .then(function (response) {$scope.names = response.data.records;});
  35. });
  36. </script>
  38. </body>
  39. </html>
运行一下

显示表格索引 ($index)

要显示表格索引，请添加一个带有 $index 的 <td> :

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, th , td  {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. table tr:nth-child(odd) {
  10.   background-color: #f1f1f1;
  11. }
  12. table tr:nth-child(even) {
  13.   background-color: #ffffff;
  14. }
  15. </style>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  17. <body>
  19. <div ng-app="myApp" ng-controller="customersCtrl">
  21. <table>
  22.   <tr ng-repeat="x in names">
  23.     <td>{{ $index + 1 }}</td>
  24.     <td>{{ x.Name }}</td>
  25.     <td>{{ x.Country }}</td>
  26.   </tr>
  27. </table>
  29. </div>
  31. <script>
  32. var app = angular.module('myApp', []);
  33. app.controller('customersCtrl', function($scope, $http) {
  34.     $http.get("/znadmin/md/2849/customers.json")
  35.     .then(function (response) {$scope.names = response.data.records;});
  36. });
  37. </script>
  39. </body>
  40. </html>
运行一下

使用 $even 与 $odd

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, td  {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. </style>
  10. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  11. <body>
  13. <div ng-app="myApp" ng-controller="customersCtrl">
  15. <table>
  16.   <tr ng-repeat="x in names">
  17.     <td ng-if="$odd" style="background-color:#f1f1f1">
  18.     {{ x.Name }}</td>
  19.     <td ng-if="$even">
  20.     {{ x.Name }}</td>
  21.     <td ng-if="$odd" style="background-color:#f1f1f1">
  22.     {{ x.Country }}</td>
  23.     <td ng-if="$even">
  24.     {{ x.Country }}</td>
  25.   </tr>
  26. </table>
  28. </div>
  30. <script>
  31. var app = angular.module('myApp', []);
  32. app.controller('customersCtrl', function($scope, $http) {
  33.     $http.get("/znadmin/md/2849/customers.json")
  34.     .then(function (response) {$scope.names = response.data.records;});
  35. });
  36. </script>
  38. </body>
  39. </html>
运行一下
AngularJS HTTP
AngularJS Select

分类导航