你可以使用bootstrap类并使用ng-repeat指令建立一个表

例子:

angular.module('App', []); function ctrl($scope) { $scope.items = [ ['A', 'B', 'C'], ['item1', 'item2', 'item3'], ['item4', 'item5', 'item6'] ]; } <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="App"> <div ng-controller="ctrl"> <table class="table table-bordered"> <thead> <tr> <th ng-repeat="itemA in items[0]">{{itemA}}</th> </tr> </thead> <tbody> <tr> <td ng-repeat="itemB in items[1]">{{itemB}}</td> </tr> <tr> <td ng-repeat="itemC in items[2]">{{itemC}}</td> </tr> </tbody> </table> </div> </div>

生活例子: http://jsfiddle.net/choroshin/5YDJW/5/

更新:

或者你可以尝试流行的ng-grid, ng-grid很适合排序、搜索、分组等，但我还没有在大规模数据上测试过。

对于“数千行”，您最好的选择显然是进行服务器端分页。当我查看不同的AngularJs表格/网格选项时，有三个明显的最爱:

ng-grid ng-table Smart-Table

这三个都很好，但实现方式不同。你选择哪一个可能更多的是基于个人喜好，而不是其他因素。

ng-grid可能是最著名的，因为它与angular-ui有关联，但我个人更喜欢ng-table，我真的很喜欢他们的实现和你使用它的方式，他们有很好的文档和示例，并且正在积极改进。

我也有同样的需求，并使用以下组件解决了它:

AngularJS 1.0.8 AngularUI Boostrap 0.10.0:兼容AngularJS 1.0.8和Boostrap CSS 3.x。 ng-grid 2.0.7:兼容AngularJS 1.0.8 Bootstrap CSS 3.0

表组件ng-grid能够在一个可滚动的网格中显示数百行。 如果你必须处理数千个条目，你最好使用ng-grid的分页器。 ng-grid的文档非常出色，包含许多示例。 即使与分页结合使用，也支持排序和搜索。

下面是一个当前项目的截图，让你对它的外观有一个印象:

[2017年7月更新]

After having ng-grid in production for a couple of years, I can still tell that there are no major issues with this component. Yes, plenty of minor bugs, but no show stoppers (at least in my use cases). Having said that, I would strongly advice against using this component if you start a project from the scratch. This component is a good option only if you are bound to AngularJS 1.0.x. If you are free to choose the Angular version, go for a newer component. A list of table components for Angular 4 was compiled by Sam Deering in this blog.

正如在其他答案中提到的:对于具有搜索功能的表，选择和分页“ng-grid”是最好的选择。我将提到一些我遇到的事情，这些事情在执行时可能会有用:

设置env:

http://www.json-generator.com/生成JSON数据。它是一个非常酷的工具，可以获得示例数据集，从而加快开发速度。 您可以检查这个活塞为您的实现。我已经修改包括:搜索，选择和分页 http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

你可以查看这篇关于智能表格的教程，给出了你需要的所有信息: http://lorenzofox3.github.io/smart-table-website/

下一个问题是引导3: 不完全是，但这个模板看起来不错。 -你可以使用https://github.com/angular-ui/bootstrap/tree/master/template所有的模板都写得很好。

我可以继续介绍如何将bootstrap 3转换为angularjs，但它已经在以下链接中提到:

引导3兼容当前的AngularJS引导指令? https://github.com/angular-ui/bootstrap/issues/331

请注意，关于智能桌，你必须检查它是否为你的角版本做好了准备

剑道网格和Wijmo一样好。我知道Kendo的数据源有Angular绑定，Wijmo也有Angular插件。不过，它们都不是免费的。

一个特性丰富的Angular网格是:

trNgGrid

它的一些特点:

以简洁为设计理念。 正在使用普通HTML表，允许浏览器优化呈现。 完全声明性的，保持关注点的分离，从而允许您在HTML中完整地描述它，而不会弄乱控制器。 可以通过模板和双向数据绑定属性进行完全定制。 易于维护，使用TypeScript编写代码。 有一个非常短的依赖列表:AngularJs和Bootstrap CSS，带有可选的bootwatch主题。

享受。是的，我是作者。我受够了所有的Angular网格。

到目前为止，trngrid工作得很好。以下是我更喜欢它而不是ng-grid并转移到这个组件的原因

它使表元素可以被引导监视，并使用bootstrap .css的所有功能(ng-grid使用jQuery UI主题)。 简单的、记录良好的网格选项。 服务器大小分页工作

在回答“如果你有jQuery背景，如何用Angular思考”这个问题的最后，Josh David Miller的文章总结道:

甚至不要使用jQuery。甚至不要包括它。它会阻碍你。 当你遇到一个你认为你知道如何解决的问题时 jQuery已经在使用，在使用$之前，试着考虑如何 在AngularJS的范围内完成。如果你不知道，就去问!19 20次中，最好的方法是不需要jQuery和尝试 用jQuery解决它会给你带来更多的工作。

现在，如果你想要一个具有大量自定义功能和选项的网格， jQuery DataTables是其中最好的一个。我所见过的只有角的网格 不能接近jQuery DataTables的功能。

然而，jQuery数据表并不能很好地与AngularJS集成。 (有各种各样的努力，但没有一个能提供无缝集成。)

也许这让人有两种选择。

第一种方法是使用纯Angular网格，它的特性不像DataTables那样丰富。我同意@Moonstom关于厌倦其他Angular网格的看法 在那里，trngrid看起来不错。

第二种选择是:这是罕见的20例中的1例 你应该使用jQuery和jQuery DataTables插件， 因为用纯Angular网格重新发明轮子的努力已经 产生了不如DataTables健壮的轮子。

如果不是这样就好了，只是我还没见过 Angular生态系统会提供像jQuery数据表一样强大的网格， 一个好的数据网格并不是一个web应用程序的好东西: 一个好的网格是必不可少的。

对于阅读这篇文章的人:帮自己一个忙，远离ng-grid。充满了bug(真的..几乎库的每个部分都被破坏了)，开发人员已经放弃了对2.0的支持。为了在3.0中工作，X分支还远远没有准备好。自己解决问题不是一件容易的事情，ng-grid代码并不小，也不简单，除非你有很多时间，并且对angular和js有很深的了解，否则这将是一项艰巨的任务。

总结:充满bug，最后一个稳定版本已经被放弃。

github上满是pr，但它们被忽略了。如果你在2。X分支关闭了。

我知道这是一个开源项目，抱怨可能听起来有点不合时宜，但从一个寻找库的开发人员的角度来看，这是我的观点。在一个大型项目中，我花了很多时间使用ng-grid，而这些headcached从来没有结束过

Adapt-Strap。这是小提琴。

它非常轻，并具有动态行高。

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.

他们的JS代码依赖于angular，而你的html可以依赖于bootstrap。JS代码总共是4 kb，如果你想要达到更小的占用空间，你甚至可以轻松地从那里挑选东西。

其他网格会让你在不同的区域感到幽闭恐惧，智能表只是感觉开放和点睛。

如果你非常依赖内联编辑和其他高级功能，你可能会使用ngTable更快地启动和运行。但是，您可以在Smart Table中轻松地添加这些特性。

不要错过智能桌!!

我和智能桌没有任何关系，除了我自己用过它。