每个迭代项中还有以下三个变量:

$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的更多相关文章

  1. angular学习笔记(七)-迭代1

    本篇介绍angular中元素的迭代: <!DOCTYPE html> <html ng-app> <head> <title>4.1.迭代</ti ...

  2. angular学习笔记(七)-迭代2

    视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代. 还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮. <!DOCTYPE h ...

  3. （转）Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  4. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  5. Typescript 学习笔记七：泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  8. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  9. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. DHTML【9】--Javascript

    大家好,好长时间不见了,因为博主最近在驾校学习开车,所以耽误了DHTML的更新日程,对此实感愧疚. 好了,不再得瑟了,接下来该介绍DHTML中比较核心的一个东东—Javascript. 初看Javas ...

  2. Oracle function实现根据输入的日期以及天数，获取此日期之后的天数的工作日

    前提:在法定节日表(t_fdjr )中维护法定节日包括周六周天 /** * 功能描述:根据输入的日期以及天数,获取此日期之后的天数的工作日 * 输入参数: * i_date YYYY-MM-DD * ...

  3. TP框架中的A方法和R方法

    ThinkPHP 跨模块调用操作方法(A方法与R方法) 跨模块调用操作方法 前面说了可以使用 $this 来调用当前模块内的方法,但实际情况中还经常会在当前模块调用其他模块的方法.ThinkPHP 内 ...

  4. 各种样式的table 及 代码

    1.模板一 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  5. el表达式 多条件判断

      el表达式 多条件判断 CreationTime--2018年9月13日08点59分 Author:Marydon 1.情景展示 ACCESS_ID == 'APP1039' 且 CARDTYPE ...

  6. 在notepad++中运行python代码

    #在notepad++中运行python代码 ''' 1.安装插件pyNPP, 2.允许插件pyNPP中的第一个和第二个选项即可,如果代码过少代码执行一闪而过,可能无法看到,可加入少量sleep时间即 ...

  7. 微信小程序-基于canvas画画涂鸦

    代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  8. 使用PhoneGap开发基于Html5应用二：第一个PhoneGap应用：百度

    上一篇博文使用PhoneGap开发基于Html5应用一:PhoneGap简单介绍 中我介绍了怎样从phonegap官网上下载源代码并启动第一个应用,今天我们把phonegap的应用略微改一下,让他实现 ...

  9. ubuntu发热问题的解决——显卡驱动的安装

    为了支持自由软件事业,本人作出了“一生中最有意义“的决定:将工作环境从Windows转移到Linux中来!于是装上了ubuntu-10.10,但是用了一小段时间后发现本本发热超大,于是Google百度 ...

  10. window.postMessage实现网页间通信

    window.postMessage() 方法可以安全地实现跨域通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以 ...