[乐意黎转载]AngularJS快速入门指南08：表格

发布时间：2020-12-17 09:36:14 所属栏目：安全来源：网络整理

导读：ng-repeat指令非常适合用来显示表格。在表格中显示数据在AngularJS中显示表格非常容易： div ng-app ="myApp" ng-controller ="customersCtrl" table tr ng-repeat ="x in names" td {{ x.Name }} / {{ x.Country }} tr div script var app = angular.modu

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

在表格中显示数据

　　在AngularJS中显示表格非常容易：

<div ng-app="myApp" ng-controller="customersCtrl">
        table>
            tr ng-repeat="x in names">
                td>{{ x.Name }}</>{{ x.Country }}tr>
    divscript>
        var app = angular.module('myApp,[]);
        app.controller(customersCtrlfunction ($scope) {
            $scope.names  [{
                "Name: Alfreds FutterkisteCityBerlinCountryGermany
            },{
                Ana Trujillo Emparedados y heladosMéxico D.F.MexicoAntonio Moreno TaqueríaAround the HornLondonUKB's BeveragesBerglunds snabbk?pLule?SwedenBlauer See DelikatessenMannheimBlondel père et filsStrasbourgFranceBólido Comidas preparadasMadridSpainBon app'MarseilleBottom-Dollar MarketseTsawassenCanadaCactus Comidas para llevarBuenos AiresArgentinaCentro comercial MoctezumaChop-suey ChineseBernSwitzerlandComércio MineiroS?o PauloBrazil
            }];
        });
    >

运行

加上样式

　　为了使上面的表格更好看，我们在页面上加上一些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) { #ffffff;
}
</style>

加上orderBy过滤器

　　要对表格数据进行排序，加上orderBy过滤器：

> ="x in names | orderBy : 'Country'"> 加上uppercase过滤器

　　要显示大写形式，添加uppercase过滤器：

>{{ x.Country | uppercase }} 显示行号（$index）

　　要显示行号，在<td>中添加$index：

>{{ $index + 1 }} 使用$even和$odd

td ng-if="$odd" style="background-color:#f1f1f1"="$even" 运行

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!