AngularJS学习篇(十一)
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
<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>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function ($scope) {
$scope.names= [{name : "Ford", age : 12, color : "red"},
{name : "Fiat", age : 50, color : "white"},
{name : "Volvo", age : 9, color : "black"}];
})
</script>
</body>
</html>
使用 orderBy 过滤器
排序显示,可以使用 orderBy 过滤器:
<table>
<tr ng-repeat="x in names | orderBy : 'age'">
<td>{{ x.name }}</td>
<td>{{ x.age}}</td>
</tr>
</table>
显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index:
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.name }}</td>
<td>{{ x.age}}</td>
</tr>
</table>
使用 $even 和 $odd
odd:奇数行;even:偶数行; 从0开始
<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.age}}</td>
<td ng-if="$even">{{ x.age}}</td>
</tr>
</table>
<table>
<tr ng-repeat="x in names">
<td style="{{$even?'background-color: red':''}}">{{$index + 1}}</td>
<td style="{{$even?'background-color: red':''}}">{{ x.name }}</td>
<td style="{{$even?'background-color: red':''}}">{{ x.age}}</td>
</tr>
</table>
AngularJS学习篇(十一)的更多相关文章
- AngularJS学习篇(二十一)
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...
- AngularJS学习篇(二十四)
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇(二十三)
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇(二十二)
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇(二十)
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇(十九)
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇(十八)
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇(十七)
AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...
- AngularJS学习篇(十六)
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
随机推荐
- AngularJS的$rootScope和$scope联系和区别
scope是html和单个controller之间的桥梁,数据绑定就靠他了. rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controlle ...
- 第4章 同步控制 Synchronization ----死锁(DeadLock)
Jeffrey Richter 在他所主持的 Win32 Q&A 专栏(Microsoft Systems Journal,1996/07)中曾经提到过,Windows NT 和 Window ...
- The area 积分积分
The area Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- Judge Route Circle
Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...
- css3弹性盒模型flex快速入门与上手1
一.什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多人称之为弹性布局. 二.怎么使用flex? 任何一个容器都可以指定为flex布局 #box ...
- 富文本编辑器CKEditor的使用
由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UE ...
- C-一行或多行文章垂直居中
1 样式效果 2 table布局 li span
- Java web AJAX入门
一:AJAX简介 AJAX :Asynchronous JavaScript And XML 指异步 JavaScript 及 XML 一种日渐流行的Web编程方式 Better Faster Use ...
- iOS如何提高页面流畅度
A.提高CPU性能 对象创建1.尽量用轻量的对象代替重量的对象,比如CALayer 比 UIView 要轻量许多,如果不考虑交互事件的话,可以选择CALayer.2.Storyboard和xib加载对 ...
- springboot高并发redis细粒度加锁(key粒度加锁)
本文探讨在web开发中如何解决并发访问带来的数据同步问题. 1.需求: 通过REST接口请求并发访问redis,例如:将key=fusor:${order_id} 中的值+1: 2.场景: 设想,多线 ...