angular学习笔记(七)-迭代1
本篇介绍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的更多相关文章
- angular学习笔记(七)-迭代3
每个迭代项中还有以下三个变量: $first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false $middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如 ...
- angular学习笔记(七)-迭代2
视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代. 还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮. <!DOCTYPE h ...
- （转）Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- PHP高级教程-文件
PHP 文件处理 fopen() 函数用于在 PHP 中打开文件. 打开文件 fopen() 函数用于在 PHP 中打开文件. 此函数的第一个参数含有要打开的文件的名称,第二个参数规定了使用哪种模式来 ...
- 伪造A标签跳转（非window.open）Jquery
尊重原创:http://blog.csdn.net/zdb330906531
- expdp impdp 错误: ORA-39064: 无法写入日志文件 ORA-29285: 文件写入错误(解决方案)
windows: 运行 -> regedit ->查找 键值 NLS_LANG 将字符集 SIMPLIFIED CHINESE_CHINA.ZHS16GBK 修改为AMERICAN_AME ...
- Windows 10 Pro_Ent Insider Preview x86 x64 10147中文版激活
点击激活windows输入密钥:CC6JP-VN67C-8KCJ4-4V48V-HXM9B然后下载附件中的程序解压后运行注销即可激活企业版:在专业版基础上输入升级密钥:CKFK9-QNGF2-D34F ...
- 在notepad++中运行python代码
#在notepad++中运行python代码 ''' 1.安装插件pyNPP, 2.允许插件pyNPP中的第一个和第二个选项即可,如果代码过少代码执行一闪而过,可能无法看到,可加入少量sleep时间即 ...
- VMware Player 12.5.0 中文免费版
VMWare Player优点:– 免费的 VMWare Player 体积仅90多MB,相比7百多MB且还要付费的 VMware Workstation 无疑更适合个人用户使用– 主界面清爽简洁,几 ...
- 利用 AFN 上传相册或拍照图片
概述 自定义上传图片请求,自定义调取相册及拍照,方便多处使用时调用. 详细 代码下载:http://www.demodashi.com/demo/10718.html 由于项目中多处需要上传图片,我们 ...
- Android基于TCP的局域网聊天通信
概述 在同一局域网内,两台设备通过TCP进行通信聊天. 详细 代码下载:http://www.demodashi.com/demo/10567.html 一.准备工作 开发环境 jdk1.8 Ecli ...
- 流动的推荐系统——兴趣Feed技术架构与实现
流动的推荐系统 我们经常谈论的推荐系统(Recommender System),从形式上看是比较“静态”的推荐,通常位于网页主要信息的周边,比如电商网站的“看了又看”.“买了又买”.这种推荐系统在大多 ...
- result_charts
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...