AngularJS快速入门指南08:表格
ng-repeat指令非常适合用来显示表格。
在表格中显示数据
在AngularJS中显示表格非常容易:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope) {
$scope.names = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Antonio Moreno Taquería",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Around the Horn",
"City": "London",
"Country": "UK"
}, {
"Name": "B's Beverages",
"City": "London",
"Country": "UK"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
});
</script>
加上样式
为了使上面的表格更好看,我们在页面上加上一些CSS:
<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) {
background-color: #ffffff;
}
</style>
加上orderBy过滤器
要对表格数据进行排序,加上orderBy过滤器:
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
加上uppercase过滤器
要显示大写形式,添加uppercase过滤器:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
显示行号($index)
要显示行号,在<td>中添加$index:
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
使用$even和$odd
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
AngularJS快速入门指南08:表格的更多相关文章
- AngularJS快速入门指南09:SQL
我们可以将之前章节中的代码用来从数据库中读取数据. 通过PHP Server从MySQL数据库中获取数据 <div ng-app="myApp" ng-controller= ...
- AngularJS快速入门指南07:Http对象
$http是AngularJS提供的一个服务,用来从远程服务器读取数据. 提供数据 下面的数据由Web服务器提供: { "records": [ { "Name" ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南16:Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南18:Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17:Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南15:API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
随机推荐
- ABAP-SQL基础知识
SQL语法 我们在编写ABAP4程序的时候,经常需要从TABLE中根据某些条件读取数据,读取数据最常用的方法就是通过SQL语法实现的.ABAP/4中可以利用SQL语法创建或读取TABLE,SQL语法分 ...
- Unsupported major.minor version
by: java.lang.UnsupportedClassVersionError: com/dayang/product/pubinfo/dao/ProPubInfoDAO : Unsupport ...
- Spring 定时执行任务
好不容易写了半天的文章竟然由于断网而丢失了,并未自动保存到草稿箱.只能简单的贴贴代码了. <?xml version="1.0" encoding="UTF-8&q ...
- Cisco SG300系列交换机划分VLan与普通路由器连接配置
思科SG300系列三层交换机是针对中小企业设计的一款产品,Marvell 主控和128M Ram,最大支持52个千兆RJ45端口和2个SFP端口,因公司业务需求,最近也进行了解和配置,具体型号为 SG ...
- hdu 3661 Assignments (贪心)
Assignments Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- c#:未将对象引用设置到对象的实例--可能出现的问题总结(转)
1.c#:未将对象引用设置到对象的实例--可能出现的问题总结(转):http://www.cnblogs.com/KeenLeung/archive/2013/06/23/3150578.html
- 关于Datagridview控件用法的一些总结(设置列chicun)
1. 关于Datagridview控件用法的一些总结:http://www.cnblogs.com/mingjiatang/p/4968049.html
- OutSystems学习一,安装以及入门
官方网站:http://www.outsystems.com/home/HomePage.aspx 安装完成后,在官网申请自己的管理云平台 启动客户端 详细参考帮助,跟着走就行
- shell 脚本注意事项
设脚本名为test.sh 第一行应该为#! /bin/bash 1.运行和调试的结果是不一样的 调试 sh -x test.sh 这时在计算两个数的和sum=$[$a+$b]时得到sum=3+4,而 ...
- freeCodeCamp:Return Largest Numbers in Arrays
右边大数组中包含了4个小数组,分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新数组. 提示:你可以用for循环来迭代数组,并通过arr[i]的方式来访问数组的每个元素. /*思路 for循 ...