AngularJS 之表格

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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("/try/angularjs/data/Customers_JSON.php")
            .success(function (response) {$scope.names = response.records;});
        });
    </script>
</body>
</html>

使用 CSS 样式

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <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>
</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("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
            .success(function (response) {$scope.names = response.records;});
        });
    </script>
</body>
</html>

使用 orderBy 过滤器

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <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>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
        <table>
            <tr ng-repeat="x in names | orderBy : 'Country'">
            <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("/try/angularjs/data/Customers_JSON.php")
            .success(function (response) {$scope.names = response.records;});
        });
    </script>
</body>
</html>

显示序号 ($index)

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <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>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
        <table>
            <tr ng-repeat="x in names">
            <td>{{ $index + 1 }}</td>
            <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("/try/angularjs/data/Customers_JSON.php")
            .success(function (response) {$scope.names = response.records;});
        });
    </script>
</body>
</html>

使用 $even 和 $odd 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        table, td  {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
        <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>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
            $http.get("/try/angularjs/data/Customers_JSON.php")
            .success(function (response) {$scope.names = response.records;});
        });
    </script>
</body>
</html>

不推荐用上面的写法，样式渲染和html结构代码混合在一起很不好。
这里只是为了演示一下$odd和$even