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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- Linux安装 微信开发者工具(deepin linux ubt)
一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...
- Openerp对日期时间的操作
日期格式化字符串:DATE_FORMAT = "%Y-%m-%d" 日期时间格式字符串:DATETIME_FORMAT = "%Y-%m-%d %H:%M:%S" ...
- Oracle 12c CDB PDB
先说基本用法: 先按11G之前进行 conn / as sysdba; create user test identifed by test; ORA-65096: 公用用户名或角色名无效. 查官方文 ...
- TOMCAT清理
CreateTime--2017年7月10日08:54:00Author:Marydon 如何清理TOMCAT 方式一:通过tomcat的安装目录进行清理 找到TOMCAT的根目录,如图: 实质: ...
- 自定义网站的icon和收藏夹图标
定制网站收藏夹图标的方法有两种: 第一种方法: 第一步,当然是准备一个能体现您的主页的风格和个性的图标.比较简便的办法除了下载,就是将您的网站的logo做成一个图标. 第二步,将这个图标文件命名为:f ...
- Redis学习（1）--环境配置，安装JDK，MySQL，tomcat
Linux上安装jdk,mysql,tomcat安装 rpm命令: 相当于Windows的安装/卸载程序.可以进行程序的安装,更新,卸载,查看. 本地程序安装:rpm -ivh 程序名 本地程序查看: ...
- set names utf8 【mysql导入中文乱码问题解决】
由于工作的关系需要经常导入一些sql脚本,但是经常会遇到导入中文出现乱码的问题,搞得自己每次导入sql脚本时都很害怕,自己也上网找了一些资料,尝 试了许多办法,有些方法可以正常导入中文,有些办法却不行 ...
- Linux下MySQL链接被防火墙阻止
Linux下安装了MySQL,不能从其它机器访问 帐号已经授权从任意主机进行访问 vi /etc/sysconfig/iptables 在后面添加 -A RH-Firewall-1-INPUT -m ...
- Opencv 实现图像的离散傅里叶变换（DFT）、卷积运算（相关滤波）
我是做Tracking 的,对于速度要求非常高.发现傅里叶变换能够使用. 于是学习之. 核心: 最根本的一点就是将时域内的信号转移到频域里面.这样时域里的卷积能够转换为频域内的乘积! 在分析图像信号的 ...
- PHP：微信小程序调用【统一下单】【微信支付】【支付回调】API；XML转Array，Array转XML方法（通用）
1.微信公众号.微信小程序开发过程中,第三方服务器与微信服务器数据交互,需要进行数据转换,必须用到这两个函数: 分别是xml_to_array.array_to_xml ; /** * 输出xml字符 ...