angular学习笔记(七)-迭代3
每个迭代项中还有以下三个变量:
$first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false
$middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如果是,得到true,如果不是,得到false
$last: 判断是否是迭代最后项,如果是,得到true,如果不是,得到false
然后继续刚才的实例,要求第一名的名字颜色显示粉红色,最后一名的名字颜色显示灰色,其余中间排名的都显示紫色:
<!DOCTYPE html>
<html ng-app>
<head>
<title>4.3.迭代</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
<style type="text/css">
.name a.truefirst {
color:#FBCDCD
}
.name a.truelast {
color:#ccc
}
.name a.truemiddle {
color:blueviolet
}
</style>
</head>
<body>
<div ng-controller="StudentList">
<ul>
<li ng-repeat="student in students">
<span class="index">{{$index+1}}</span>
<span class="name"><a href="/student/view/{{student.id}}" class="{{$first}}first {{$last}}last {{$middle}}middle">{{student.name}}</a></span>
<span class="score">{{student.score}}</span>
</li>
</ul>
<button ng-click="insertDog()">添加</button>
<button ng-click="delLast()">删除</button>
</div>
</body>
</html>
给每一个名字的a链接都添加三个类名,如果是第一项,则得到truefirst类名,如果是中间项,则得到truemiddle类名,如果是最后项,则得到truelast类名
点击两次添加以后:
angular学习笔记(七)-迭代3的更多相关文章
- angular学习笔记(七)-迭代1
本篇介绍angular中元素的迭代: <!DOCTYPE html> <html ng-app> <head> <title>4.1.迭代</ti ...
- angular学习笔记(七)-迭代2
视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代. 还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮. <!DOCTYPE h ...
- （转）Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- HDU 2883 kebab（最大流）
HDU 2883 kebab 题目链接 题意:有一个烧烤机,每次最多能烤 m 块肉.如今有 n 个人来买烤肉,每一个人到达时间为 si.离开时间为 ei,点的烤肉数量为 ci,每一个烤肉所需烘烤时间为 ...
- 检查用户输入信息是否完整（vb.net实现）
机房收费系统中.在将用户输入的信息封装到实体中作为參数传到B层之前,总要对用户输入的信息进行检查.我将这种检查分为两类: 合法性检查 完整性检查 所谓合法性检查,就是用户输入的信息是否 ...
- hdu 4893 Wow! Such Sequence!(线段树)
题目链接:hdu 4983 Wow! Such Sequence! 题目大意:就是三种操作 1 k d, 改动k的为值添加d 2 l r, 查询l到r的区间和 3 l r. 间l到r区间上的所以数变成 ...
- Unity3D - 资源管理
一直没有总结过Unity的资源管理,都是随用随看文档.今天有人问起,总结一下.加深对Unity资源管理的理解. 主要參考了Unity官方文档之Resources和AssetBundle. Unity有 ...
- with/as上下文管理器
# -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 868 #with/as上下文管理器 #with语句的基本格式: with open( ...
- eval、exec、execfile
# -*- coding: utf-8 -*- #python 27 #xiaodeng #http://blog.csdn.net/azhao_dn/article/details/6921654 ...
- python之函数用法__str__()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法__str__() #http://www.cnblogs.com/hongfei/p ...
- 将Memcached作为服务自动启动
1.最简单的做法 通常:启动Memcache的服务器端的命令为: /usr/local/bin/memcached -d -m 256 -u root -l 127.0.0.1 -p 12000 -c ...
- 面试题 Comparable、Comparator 比较
Comparable 用作默认的比较方式 Comparator 用作自定义的比较方式,当默认的比较方式不适用时或者没有提供默认的比较方式,使用Comparator就非常有用. 像Arrays和Coll ...
- HDUOJ--Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...