视图的迭代和它的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. 在线sass编译器

    工作中,我们可能遇到突发情况(无法安装考拉,gulp以及webpack以及其它的自动化工具),我们这时就要用即时编译工具了,那么它就是你的首选: http://tool.oschina.net/

  2. VB中如何修改treeview的背景色

    改变 TreeView 的背景    Private Declare Function SendMessage Lib "User32" Alias "SendMessa ...

  3. 解决 只能通过chrome网上应用商店安装该程序

    第一种方法: 右击 Chrome 桌面快捷方式,选择-”属性”-”快捷方式”,然后在”目标”一栏尾部添加参数 -enable-easy-off-store-extension-install 第二种方 ...

  4. Loadrunner脚本编程（3）- 检查点，关联等函数

    http://www.360doc.com/content/10/0806/13/1698198_44078093.shtml 1．  错误预防和恢复 参数默认是用{}括起来的,但也可以指定用< ...

  5. Chrome 编译错误汇总

    由于各种你懂的原因,訪问google的服务总是出错,先是hosts不工作.代理也不好使,最后最终能够短暂訪问了.我的版本号还是採用svn维护的,直接svn update也不行.试试git吧,一晚上才下 ...

  6. Android网络开发之WIFI

    WIFI全称Wireless Fidelity, 又称802.11b标准.WIFI联盟成立于1999年,当时的名称叫做Wireless Ethernet Compatibility Alliance( ...

  7. maven依赖导致包重复加载及冲突

    maven中配置 pom时,有时配置添加一个 jar却会自动导入多个 jar包,往往这些自动导入的 jar包会与我们项目中已存在的 jar包重复,从而导致冲突.由于这些 jar包不是我们自己配置的,所 ...

  8. tomcat占用cpu过高解决办法

    在工作中经常遇到tomcat占用cpu居高不下,针对这种情况有以下处理办法进行排查. jps --> 查看java的进程 top -Hp pid --> 根据jps得到的进程号(pid), ...

  9. VC++字符串的使用及转换

    CString ,BSTR ,LPCTSTR之间关系和区别 CString是一个动态TCHAR数组,BSTR是一种专有格式的字符串(需要用系统提供的函数来操纵,LPCTSTR只是一个常量的TCHAR指 ...

  10. Form_通过FND_FNDFLUPL标准功能上传CSV控件（案例）

    2014-06-08 Created By BaoXinjian