angular学习笔记(七)-迭代3
2014-05-08 16:41
537 查看
每个迭代项中还有以下三个变量:
$first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false
$middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如果是,得到true,如果不是,得到false
$last: 判断是否是迭代最后项,如果是,得到true,如果不是,得到false
然后继续刚才的实例,要求第一名的名字颜色显示粉红色,最后一名的名字颜色显示灰色,其余中间排名的都显示紫色:
给每一个名字的a链接都添加三个类名,如果是第一项,则得到truefirst类名,如果是中间项,则得到truemiddle类名,如果是最后项,则得到truelast类名
点击两次添加以后:
$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学习笔记(七)-迭代1
- angular学习笔记(七)-迭代2
- Angular学习笔记之angular的$filter服务浅析
- Python学习笔记,切片,迭代
- angularjs ng-class学习笔记
- 递归和迭代(学习笔记)
- Python开发学习笔记(10) - 迭代
- Angular5学习笔记 - 配置NG-ZORRO(八)
- 《Angular(ng-book2)权威指南》学习笔记2——初步学习typescript
- 【数据结构与算法学习笔记】PART1:算法分析(计算,计算模型,大O记号,算法分析,迭代与递归,动态控制)
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
- Python3学习笔记(四)--迭代
- Angular 学习笔记——run
- Angular 学习笔记——service &constant
- angular学习笔记(十五)-module里的'服务'
- Angular 学习笔记 2
- Angular学习笔记(二)之Angular的内置指令
- Angular.js回顾+学习笔记(1)【ng-app和ng-model】
- 单个angular页面如何加载多个ng-app应用---------------------学习笔记
- Angular 学习笔记 ( 链接服务器 )