09AngularJS 表格

Posted 2020-06-14

AngularJS 表格

---

ng-repeat 指令可以完美的显示表格。

---

在表格中显示数据

使用 angular 显示表格是非常简单的：

1. <div ng-app="myApp" ng-controller="customersCtrl">
3. <table>
4. <tr ng-repeat="x in names">
5. <td>{{ x.Name}}</td>
6. <td>{{ x.Country}}</td>
7. </tr>
8. </table>
10. </div>
12. <script>
13. var app = angular.module(‘myApp‘,[]);
14. app.controller(‘customersCtrl‘,function($scope, $http){
15. $http.get("test.php")
16. .success(function(response){$scope.names = response.records;});
17. });
18. </script>

 

moyu:

 

使用 CSS 样式

为了让页面更加美观，我们可以在页面中使用CSS：

1. <style>
2. table, th , td {
3. border:1px solid grey;
4. border-collapse: collapse;
5. padding:5px;
6. }
7. table tr:nth-child(odd){
8. background-color:#f1f1f1;
9. }
10. table tr:nth-child(even){
11. background-color:#ffffff;
12. }
13. </style>

结果：

---

使用 orderBy 过滤器

排序显示，可以使用 orderBy 过滤器: 

1. <table>
2. <tr ng-repeat="x in names | orderBy : ‘Country‘">
3. <td>{{ x.Name}}</td>
4. <td>{{ x.Country}}</td>
5. </tr>
6. </table>

结果：

使用 uppercase 过滤器

使用 uppercase 过滤器转换为大写: 

1. <table>
2. <tr ng-repeat="x in names">
3. <td>{{ x.Name}}</td>
4. <td>{{ x.Country| uppercase }}</td>
5. </tr>
6. </table>

结果：

---

显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index: 

1. <table>
2. <tr ng-repeat="x in names">
3. <td>{{ $index +1}}</td>
4. <td>{{ x.Name}}</td>
5. <td>{{ x.Country}}</td>
6. </tr>
7. </table>

魔芋结果：

---

使用 $even 和 $odd

1. <table>
2. <tr ng-repeat="x in names">
3. <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name}}</td>
4. <td ng-if="$even">{{ x.Name}}</td>
5. <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country}}</td>
6. <td ng-if="$even">{{ x.Country}}</td>
7. </tr>
8. </table>

结果：