AngularJS入门教程之表格实例详解

AngularJS入门教程之表格实例详解

本文主要介绍AngularJS 表格,这里给大家整理了相关知识,并附代码实例,有需要的小伙伴可以参考下

AngularJS 表格

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

在表格中显示数据

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

AngularJS 实例

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

运行结果:

Alfreds FutterkisteGermany
Ana Trujillo Emparedados y heladosMexico
Antonio Moreno TaqueríaMexico
Around the HornUK
B's BeveragesUK
Berglunds snabbköpSweden
Blauer See DelikatessenGermany
Blondel père et filsFrance
Bólido Comidas preparadasSpain
Bon app'France
Bottom-Dollar MarketseCanada
Cactus Comidas para llevarArgentina
Centro comercial MoctezumaMexico
Chop-suey ChineseSwitzerland
Comércio MineiroBrazil

 使用 CSS 样式

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

CSS 样式

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

 运行结果:

Alfreds FutterkisteGermany
Ana Trujillo Emparedados y heladosMexico
Antonio Moreno TaqueríaMexico
Around the HornUK
B's BeveragesUK
Berglunds snabbköpSweden
Blauer See DelikatessenGermany
Blondel père et filsFrance
Bólido Comidas preparadasSpain
Bon app'France
Bottom-Dollar MarketseCanada
Cactus Comidas para llevarArgentina
Centro comercial MoctezumaMexico
Chop-suey ChineseSwitzerland
Comércio MineiroBrazil

 使用 orderBy 过滤器

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

AngularJS 实例

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

 运行效果:

 

Cactus Comidas para llevarArgentina
Comércio MineiroBrazil
Bottom-Dollar MarketseCanada
Blondel père et filsFrance
Bon app'France
Alfreds FutterkisteGermany
Blauer See DelikatessenGermany
Ana Trujillo Emparedados y heladosMexico
Antonio Moreno TaqueríaMexico
Centro comercial MoctezumaMexico
Bólido Comidas preparadasSpain
Berglunds snabbköpSweden
Chop-suey ChineseSwitzerland
Around the HornUK
B's BeveragesUK

 使用 uppercase 过滤器

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

AngularJS 实例

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

运行效果:

Alfreds FutterkisteGERMANY
Ana Trujillo Emparedados y heladosMEXICO
Antonio Moreno TaqueríaMEXICO
Around the HornUK
B's BeveragesUK
Berglunds snabbköpSWEDEN
Blauer See DelikatessenGERMANY
Blondel père et filsFRANCE
Bólido Comidas preparadasSPAIN
Bon app'FRANCE
Bottom-Dollar MarketseCANADA
Cactus Comidas para llevarARGENTINA
Centro comercial MoctezumaMEXICO
Chop-suey ChineseSWITZERLAND
Comércio MineiroBRAZIL

显示序号 ($index)

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

AngularJS 实例

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

运行效果:

1Alfreds FutterkisteGermany
2Ana Trujillo Emparedados y heladosMexico
3Antonio Moreno TaqueríaMexico
4Around the HornUK
5B's BeveragesUK
6Berglunds snabbköpSweden
7Blauer See DelikatessenGermany
8Blondel père et filsFrance
9Bólido Comidas preparadasSpain
10Bon app'France
11Bottom-Dollar MarketseCanada
12Cactus Comidas para llevarArgentina
13Centro comercial MoctezumaMexico
14Chop-suey ChineseSwitzerland
15Comércio MineiroBrazil

使用 $even 和 $odd

AngularJS 实例

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

运行效果:

Alfreds FutterkisteGermany
Ana Trujillo Emparedados y heladosMexico
Antonio Moreno TaqueríaMexico
Around the HornUK
B's BeveragesUK
Berglunds snabbköpSweden
Blauer See DelikatessenGermany
Blondel père et filsFrance
Bólido Comidas preparadasSpain
Bon app'France
Bottom-Dollar MarketseCanada
Cactus Comidas para llevarArgentina
Centro comercial MoctezumaMexico
Chop-suey ChineseSwitzerland
Comércio MineiroBrazil

以上就是对AngularJS 表格资料的整理,后续继续补充,希望能帮助到有需要的同学。

以上就是AngularJS入门教程之表格实例详解的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读