AngularJS中文参考手册 /AngularJS 表格

AngularJS 表格


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


在表格中显示数据

使用 angular 显示表格是非常简单的:

实例

     
{{ x.Name }} {{ x.Country }}

运行实例 »

点击 "运行实例" 按钮查看在线实例


使用 CSS 样式

为了让页面更加美观,我们可以在页面中使用CSS:

实例

      
{{ x.Name }} {{ x.Country }}

运行实例 »

点击 "运行实例" 按钮查看在线实例


使用 orderBy 过滤器

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

实例

      
{{ x.Name }} {{ x.Country }}

运行实例 »

点击 "运行实例" 按钮查看在线实例


使用 uppercase 过滤器

使用uppercase过滤器转换为大写:

实例

      
{{ x.Name }} {{ x.Country | uppercase }}

运行实例 »

点击 "运行实例" 按钮查看在线实例


显示序号 ($index)

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

实例

      
{{ $index + 1 }} {{ x.Name }} {{ x.Country }}

运行实例 »

点击 "运行实例" 按钮查看在线实例


使用 $even 和 $odd

实例

      
{{ x.Name }} {{ x.Name }} {{ x.Country }} {{ x.Country }}

运行实例 »

点击 "运行实例" 按钮查看在线实例