AngularJS（七）迭代3

wea111222333

于 2017-08-11 10:05:02 发布

阅读量165

点赞数

分类专栏： AngularJS 文章标签： angularjs

AngularJS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

转载出处：http://www.cnblogs.com/liulangmao/p/3716522.html

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

$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类名

点击两次添加以后:

wea111222333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS（七）迭代3

转载出处：http://www.cnblogs.com/liulangmao/p/3716522.html每个迭代项中还有以下三个变量:$first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false$middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如果是,得到true,如果不是,得到false$last
复制链接

扫一扫