本篇介绍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. PHP高级教程-Cookie

    PHP Cookie cookie 常用于识别用户. Cookie 是什么? cookie 常用于识别用户.cookie 是一种服务器留在用户计算机上的小文件.每当同一台计算机通过浏览器请求页面时,这 ...

  2. 替换 ionic 中的 图标

    第一步,你把你的项目的SVG文件跟你自己做的图标的SVG文件都上到icomoon.io/app(上传方式上节已经讲过了,不会的翻下上节内容),会看到这么界面 第二步,点击下载后,出现这个页面,修改前缀 ...

  3. 重置outlook 2010

    1.进入 D:\program files\mirosoft office\ioffice14 2.outlook /importprf .\.prf 3.账号问题可以-->控制面板--> ...

  4. RESTFul中的那些事（2）----怎样支持RESTFul的HTTP Patch方法？

    我们在调用RESTFul服务的时候,有的时候.第三方的服务会提供支持PATCH 操作的方法,在这样的情况下.我们假设我们以下的这样的方式, 去调用PATCH操作.肯定会返回40X的错误. PATCH ...

  5. iOS-APP启动页加载广告

    概述 加载广告页, 展现跳过按钮实现倒计时功能, 并判断广告页面是否更新. 详细 代码下载:http://www.demodashi.com/demo/10698.html 目前市场上很多APP(如淘 ...

  6. 客户端用java api 远程操作HDFS以及远程提交MR任务(源码和异常处理)

    两个类,一个HDFS文件操作类,一个是wordcount 词数统计类,都是从网上看来的.上代码: package mapreduce; import java.io.IOException; impo ...

  7. 原创：微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求

    1.服务器端使用TP3.2处理(随便写在一个Controller里面) /* 小程序报名,生成订单 */ public function make_order(){ if(IS_POST){ $dat ...

  8. 职业-把工作当作职业 or 事业？

    有这么一种说法,工作态度可以分为两种:一种是把工作当作职业,另一种是把工作当成事业.态度折射品质,态度影响成败. 把工作当作一份职业的人,以职业交换薪水,完全是为工作而工作,工作是为了糊口养家,上班是 ...

  9. HDUOJ----(1084)What Is Your Grade?

    关键是自己没有读懂题目而已,不过还好,终于给做出来了...... What Is Your Grade? Time Limit: 2000/1000 MS (Java/Others)    Memor ...

  10. Xcode8的调试技能Memory Graph 实战解决闭包引用循环问题

    Xcode8的调试技能又增加了一个黑科技:Memory Graph.简单的说就是可以在运行时将内存中的对象生成一张图. 那么通过一个实际项目来练习一下吧. 首先我们写了一个自定义UIView:MyVi ...