视图的迭代和它的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的更多相关文章

  1. angular学习笔记(七)-迭代1

    本篇介绍angular中元素的迭代: <!DOCTYPE html> <html ng-app> <head> <title>4.1.迭代</ti ...

  2. angular学习笔记(七)-迭代3

    每个迭代项中还有以下三个变量: $first: 判断是否是迭代第一项,如果是,得到true,如果不是,得到false $middle: 判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如 ...

  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. TCP相关面试题总结

    1.TCP三次握手过程 wireshark抓包为:(wireshark会将seq序号和ACK自己主动显示为相对值) 1)主机A发送标志syn=1,随机产生seq =1234567的数据包到server ...

  2. Deep compression code

    https://github.com/songhan/SqueezeNet-Deep-Compression import sys import os import numpy as np impor ...

  3. 【Docker】安装并测试安装成功

    1.环境描述 Centos 7 2.安装步骤 通过命令yum install docker安装 等待下载安装-,出现下图,按y继续 继续等待-出现下图按y继续 再继续等待- 知道出现上图表示安装完毕 ...

  4. pip简单配置

    pip安装Python模块的工具,等价于Redhat中的yum! 01.下载 百度云盘:http://pan.baidu.com/s/1eRHGBfk             ###相关的 Linux ...

  5. 转:基于 linux 平台的 libpcap 源代码分析

    libpcap 是 unix/linux 平台下的网络数据包捕获函数包,大多数网络监控软件都以它为基础.Libpcap 可以在绝大多数类 unix 平台下工作,本文分析了 libpcap 在 linu ...

  6. 【自创+转发】jQuery给input 密码框绑定回车事件

    <script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script&g ...

  7. (二)Activiti之——activiti数据库表介绍

    1. 数据库表的命名 Activiti的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. ACT_RE_*: 'RE'表示repository. 这个前缀的表包 ...

  8. HDUOJ-----(1329)Calling Extraterrestrial Intelligence Again

    Calling Extraterrestrial Intelligence Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: ...

  9. 【LeetCode】124. Binary Tree Maximum Path Sum

    Binary Tree Maximum Path Sum Given a binary tree, find the maximum path sum. The path may start and ...

  10. INFO ipc.Client:Retrying connect to server 9000

    hadoop使用bin/start_all.sh命令之后,使用jps发现datanode无法启动 This problem comes when Datanode daemon on the syst ...