angular学习笔记(七)-迭代2
视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代.
还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮.
<!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>
<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="name">{{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>
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"}];
$scope.insertDog = function(){
$scope.students.splice($scope.students.length,0,{"name":"code_dog","score":"101","id":"004"})
};
$scope.delLast = function(){
$scope.students.splice(-1,1)
}
}
insertDog方法和selLast方法,分别是往students数组里添加项和删除项.
可以看到,一旦students数组发生变化,通过ng-repeat属性绑定它的li项的迭代也会实时更新: 一开始:点击添加后:
点击两次删除后:
angular学习笔记(七)-迭代2的更多相关文章
- angular学习笔记(七)-迭代1
本篇介绍angular中元素的迭代: <!DOCTYPE html> <html ng-app> <head> <title>4.1.迭代</ti ...
- angular学习笔记(七)-迭代3
每个迭代项中还有以下三个变量: $first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false $middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如 ...
- （转）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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- wepy - Cannot read property 'Promise' of undefined
正当我们准备试探示例时,突然.... 造成这个错误有两个原因 (wepy以前的版本默认启动了Promise,自1.4.x以后需要手动开启) 1.未下载Promise 详情见启用文档:Promise ...
- [转]自定义Drawable实现灵动的红鲤鱼动画（下篇）
小鱼儿 上篇文章自定义Drawable实现灵动的红鲤鱼动画(上篇)我们绘制了可以摆动身体的小鱼,本篇就分享一下如何让小鱼游到手指点击的位置.用到的主要技术如下: 1).三阶贝塞尔曲线 2).Pat ...
- nexus 批量导入本地库
1.复制D:\maven\repository(本地仓库)到D:\sonatype-work\nexus\storage\central(nexus库路径) 2.Central --> upda ...
- 〖Windows〗Linux的Qt程序源码转换至Windows平台运行，编码的解决
在中国大陆,Windows默认的编码是gb2312,而Linux是UTF8: 多数情况下,把Linux上的程序转换至Windows上运行需要进行编码转换才能正常显示: 而其实大可以不必的,同样,文件使 ...
- 修改模块搜索路径(注意：py运行完毕，就会失效，他只是临时产生效果)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #修改模块搜索路径(注意:py运行完毕,就会失效,他只是临时产生效果) import sys print sy ...
- Linux 系统使用 iso 镜像文件或光盘配置本地YUM 源的最简单方式
1.分配光驱 选择本地的iso系统镜像文件,或者在光驱中放入系统安装盘.之后,在桌面可以看到RHEL-7.2-Server的光盘图标. 2.查看光驱挂载的位置 使用df -h 命令可以看到光驱或镜像文 ...
- 在C#中判断某个类是否实现了某个接口
有时我们需要判断某个类是否实现了某个接口(Interface),比如在使用反射机制(Reflection)来查找特定类型的时候. 简单来说,可以使用Type.IsAssignableFrom方法: t ...
- Fiddler 中请求时间的显示列
在Tool bar上面找到 Rules->CustomRules 在class Handlers{ 里面添加 //----------------------------显示请求时间,显示毫 ...
- Oracle创建库
oracle创建表空间 SYS用户在CMD下以DBA身份登陆: 在CMD中打sqlplus /nolog 然后再 conn / as sysdba --如果路径不存在则要创建路径 --创建临时表空间 ...
- Java获取资源的路径
在Java中,有两种路径: 类路径 文件夹路径 使用类路径有两种方式: object.getClass().getResource()返回资源的URL MyClass.class.getResourc ...