AngularJS 表格 - 蝴蝶教程

在表格在显示数据

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

用 AngularJS 显示表格非常简单：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<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("customers.php")
             .then(function (response) {$scope.names = response.data.records;});
        });
    </script>
</body>
</html>

尝试一下

用 CSS 样式显示

为了使其美观，请在页面上添加一些CSS：

<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>

尝试一下

用过滤器排序表数据

要对表格进行排序，请添加一个 orderBy 过滤器：

<table>
    <tr ng-repeat="x in names | orderBy : 'Country'">
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
    </tr>
</table>

尝试一下

用 $index 在表显示索引值

要显示表索引，请在<td>中添加$index ：

下面示例演示了在服务器上，我们有一个文件，该文件返回一个JSON对象，该对象包含15个客户，所有客户都包装在称为records的数组中。

<table>
    <tr ng-repeat="x in names">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
    </tr>
</table>

尝试一下

使用 $even 和 $odd 奇偶数

下面示例演示了使用 $even 和 $odd 对表格的奇偶数设置各行换色：

<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>

尝试一下