AngularJS 表格

来源：互联网发布：缅甸语翻译软件编辑：程序博客网时间：2024/05/16 11:58

1、表格概述

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

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

2、使用 CSS 样式

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

3、使用 orderBy 过滤器

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

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

4、使用 uppercase 过滤器

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

5、显示序号 index

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

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

6、使用 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>

0 0