本篇介绍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. Simple example

    This is a simple example showing a small window. Yet we can do a lot with this window. We can resize ...

  2. vue 子组件引用

    使用 ref 为子组件指定一个引用 ID.例如: <div id="parent"> <user-profile ref="profile"& ...

  3. Java 基础【11】.class getClass () forName() 详解

    类名.class是Class对象的句柄,每个被加载的类,在jvm中都会有一个Class对象与之相对应. 如果要创建新的对象,直接使用Class对象的局部class.forName就可以了,不需要用ne ...

  4. eclipse 修改maven项目的jdk版本

      eclipse 修改maven项目的jdk版本 CreationTime--2018年6月8日10点29分 Author:Marydon 1.情景展示 jdk版本太低,如何修改 2.错误方式 第一 ...

  5. Linux磁盘分区及链接文件的特点

    系统分区 传统的分区fdisk 最大支持2T的硬盘分区 对存储,多分区使用的parted 主分区:最多只能有4个 扩展分区 最多只能有1个 主分区加扩展分区最多有4个 不能写入数据,只能包含逻辑分区 ...

  6. JPA实体继承实体的映射策略

    注:这里所说的实体指的是@Entity注解的类 继承映射使用@Inheritance来注解.它的strategy属性的取值由枚举InheritanceType来定义(包含SINGLE_TABLE.TA ...

  7. js firstChild 、nextSibling、lastChild、previousSibling、parentNode

    nextSibling下一个兄弟节点 previousSibling上一个兄弟 parentNode父亲节点 <select><option value="zs" ...

  8. 设置/修改centos上的swap交换分区的方法

    设置centos上的swap交换分区的方法 作为linux世界里最稳定的服务器版本,rhas5一直有很大的应用面,之前一直关注的是freebsd,因为应用的需要,特别在配合mysql和oracle上r ...

  9. dokuwiki语法

    dokuwiki是一个php写的维基系统,它的插件中包含markdown插件.但是markdown语法跟dokuwiki语法混着用会出现一些bug.所以还是学一下dokuwiki的语法吧. dokuw ...

  10. RHEL7 -- nmcli的使用

    查看网络设备的状态: # nmcli dev status DEVICE TYPE STATE ens32 --ethernet connected eth1 --ethernet disconnec ...