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 }]; }); >
加上样式
<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>