AngularJS 表格 · AngularJs教程

AngularJS 表格

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

在表格中显示数据

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

AngularJS 实例

  

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

  

使用 CSS 样式

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

CSS 样式

  
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) {  
  background-color: #ffffff;  
}  

排序显示

如果需要对表格进行排序，我们可以添加 orderBy 过滤器:

AngularJS 实例

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

Try it Yourself ?

使用 uppercase 滤器

如果字母要转换为大写，可以添加 uppercase 过滤器:

AngularJS 实例

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