AngularJS 学习之表格
1.ng-repeat指令可以完美的显示表格;
2.在表格中显示数据:
<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,$http){
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php");
.success(function(response){$scope.names=response.records});
});
</script>
3.使用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>
4.使用orderBy过滤器:排序显示,可以使用orderBy过滤器;
<table>
<tr ng-repeat="x in names | orderBy:'Country'">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
5.使用uppercase过滤器转换为大写:
<table>
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.Country | uppercase }}</td>
</tr>
</table>
6.显示序号($index):表格显示序号可以在<td>中添加$index;
<table>
<tr ng-repeat="x in names">
<td>{{$index+1}}</td>
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
7.使用$even和$odd:
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country}}</td>
<td ng-if="$even">{{x.Name}}</td>
<td ng-if="$odd" style="backgrund-color:#f1f1f1">{{x.Country}}</td>
<td ng-if="$even">{{x.Country}}</td>
</tr>
</table>
AngularJS 学习之表格的更多相关文章
- 《AngularJS学习整理》系列分享专栏
<AngularJS学习整理>系列分享专栏 <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结
karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...
- AngularJs学习总结-了解基本特性(-)
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
随机推荐
- monitor system
#!/bin/bash # #Snapshot_Stats - produces a report for system stats # This report will mail to root. ...
- hiho一下第一周 最长回文子串
题目链接:http://hihocoder.com/contest/hiho1/problem/1 #include <iostream> #include <cstdio> ...
- mysql中Access denied for user 'root'@'localhost' (using password:YES)
关于昨天下午说的MySQL服务无法启动的问题,解决之后没有进入数据库,就直接关闭了电脑. 今早打开电脑,开始-运行 输入“mysql -uroot -pmyadmin”后出现以下错误: “Access ...
- BlacJack游戏
首先游戏的简介如下: Blac ...
- idea 用maven骨架生成项目速度慢的问题
使用mvn archetype:generate命令时,加上-DarchetypeCatalog=local archetypeCatalog=local
- ASP.NET MVCでResponse Headerのサーバーバージョンをどうやって隠しますか?
本来是发布在客户的Wiki上的,所以用日语写. ---------------------------------------------------------------------------- ...
- Android的两种事件处理机制
UI编程通常都会伴随事件处理,Android也不例外,它提供了两种方式的事件处理:基于回调的事件处理和基于监听器的事件处理. 对于基于监听器的事件处理而言,主要就是为Android界面组件绑定特定的事 ...
- 开个坑, 写个阿里云开放储存服务(OSS)的C++版SDK以及客户端
这应该是继我研究手册QQ协议后的第2个稍微正式一点的网络程序, 不只是Scoket套接字编程, 还涉及到更多的HTTP协议知识! 阿里云开放储存服务OSS官方已经提供了不少SDK, 包括PHP/Pyt ...
- 老生常谈,正确使用memset
转自:http://blog.csdn.net/my_business/article/details/40537653 前段项目中发现一个问题,程序总是在某个dynamic_cast进行动态转换时出 ...
- mysql_multi启动数据库
1.初始化数据库 在$mysql_base目录下,新增加存放data的文件夹,用mysql_install_db命令执行初始化 [root@ora11g scripts]# ./mysql_insta ...