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

前端之家收集整理的这篇文章主要介绍了[乐意黎转载]AngularJS快速入门指南08:表格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

 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过滤器:

猜你在找的Angularjs相关文章