本篇介绍angular中元素的迭代:

<!DOCTYPE html>

<html ng-app>

<head>

  <title>4.1.迭代</title>

  <meta charset="utf-8">

  <script src="../angular.js"></script>

  <script src="script.js"></script>

</head>

<body>

  <ul ng-controller="StudentList">

    <li ng-repeat="student in students">

      <span class="index">{{$index+1}}</span><span class="name"><a href="/student/view/{{student.id}}" class="name">{{student.name}}</a></span><span

            class="score">{{student.score}}</span>

    </li>

  </ul>

</body>

</html>
function StudentList ($scope){

    $scope.students = [{"name":"code_bunny","score":"100","id":"001"},{"name":"white_bunny","score":"90","id":"002"},{"name":"black_bunny","score":"80","id":"003"}]

}
ng-repeat="student in students

使用ng-repeat属性来迭代当前元素,其中
in 之后的students,是当前作用域下的students变量
in之前的student是自己取的名字,作为下面的{{}}中当前被循环到的数据的名字.
$index是迭代的索引值,表示当前迭代到第几条了.从0开始

angular学习笔记(七)-迭代1的更多相关文章

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

    每个迭代项中还有以下三个变量: $first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false $middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如 ...

  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. Uubntu14.04下 Hadoop集群环境搭建

    1机器信息 master192.168.3.10 hadoop/ hadoop slave1192.168.3.11 hadoop/ hadoop slave2192.168.3.12 hadoop/ ...

  2. Linux库的创建和使用

    Linux库的概念 库是一种软件组建技术,里面封装了数据和函数,提供给用户程序调用.使用库能够使程序模块化,提高编译速度,实现代码重用,易于升级. Windows系统提供了大量静态链接库(.lib)和 ...

  3. java面试第十三天

    I/O流 流的概念:程序与数据来源之间的桥梁 流的分类: 按数据方向分:输入流和输出流 输入流:InputStream/Reader 输出流:OutputStream/Writer 按数据类型分:字节 ...

  4. python 2.7疑难问题之 编码

    #http://www.cnblogs.com/bluescorpio/p/4303656.html •在遇到错误提示时,注意查看错误提示内容,同时注意查看type类型. 1.TypeError: d ...

  5. http 事务

    #事务#HTTP权威指南 9页一个事务由一条请求命令和一个响应结果组成.这种通信是通过名叫HTTP报文(http message)的格式化数据块进行的

  6. 26、线性表（List）

    1.List List接口是Collection的子接口,List是一个可重复集合 2.ArrayList和LinkedList ArrayList和LinkedList是List接口最常见的两个实现 ...

  7. 解决python：'ascii' codec can't encode characters in position问题

    今天把一个列表转换成字符串输出的时候出现了UnicodeEncodeError: 'ascii' codec can't encode characters in position 32-34: or ...

  8. docker login harbor出现的报错Error response from daemon: Get https://172.16.1.99/v1/users/: dial tcp 172.16.1.99:443: getsockopt: connection refused解决方法

    出现的问题 [root@master01 ~]# docker login 172.16.1.99 Username: admin Password: Error response from daem ...

  9. 关于iOS 类扩展Extension的进一步理解

    很多人可能会问  iOS的分类和扩展的区别,网上很多的讲解,但是一般都是分类讲的多,而这也是我们平常比较常用的知识:但是,对于扩展,总觉得理解的朦朦胧胧,不够透彻. 这里就讲一下我自己的理解,但是这个 ...

  10. 微信小游戏“跳一跳”，Python“外挂”已上线

    微信又一次不声不响地搞了个大事情: “小游戏”上线了! 于是,在这辞旧迎新的时刻,毫无意外的又火了. 今天有多少人刷了,让我看到你们的双手! 喏,我已经尽力了…… 不过没关系,你们跳的再好,在毫无心理 ...