视图的迭代和它的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. Hibernate(五)基本数据类型

    一.Hibernate的基本数据类型 3种数据类型之间的对应关系 Hibernate映射类型 Java类型 标准SQL类型 integer java.lang.Integer INTEGER long ...

  2. tomcat thread dump 分析

    前言 Java Thread Dump 是一个非常有用的应用诊断工具, 通过thread dump出来的信息, 可以定位到你需要了解的线程, 以及这个线程的调用栈. 如果配合linux的top命令, ...

  3. 堆叠相冊效果，兼容pc和移动端

    在手机端,堆叠效果的相冊是比較常见的一种图片展示方式,每一个人的思路可能会有一些不同,实现的方法不同. 本篇博客主要是分享下我的实现方法.欢迎大家提出建议,指出我的不足,先3Q啦~ 先看一下终于的效果 ...

  4. iOS开发 - 获取真机沙盒数据

    今天要获取之前真机測试时写入沙盒的数据, 本来以为挺麻烦的. 后来捣腾了一下, 才知道原来这么简单... 以下直接看详细步骤. 前提: 真机已经通过USB和你的电脑连接上了! 1.进入Organize ...

  5. servlet常用操作

      servlet常用操作 CreateTime--2017年9月7日09:36:43 Author:Marydon 1.获取当前应用程序对象 需要导入: import javax.servlet.S ...

  6. maven 找不到或无法加载主类

      maven 找不到或无法加载主类 CreateTime--2018年4月19日22:58:14 Author:Marydon 1.情景还原: 在maven管理的web项目中,单独运行Java类报错 ...

  7. python之函数用法execfile()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法execfile() #execfile() #说明:用来执行一个文件,相对于双击的效 ...

  8. Intellij IDEA 快捷键整理（dyCopy）

    原文:http://www.cnblogs.com/tonycody/p/3257601.html   [常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “! ...

  9. C++开发WPF，Step by Step

    示例代码 使用C++来开发WPF,主要是如何在MFC(Win32)的窗口中Host WPF的Page.下面我就做个详细的介绍. 一.创建工程, 由于MFC的Wizard会生成很多用不到的代码,所以我准 ...

  10. js的7个技巧

    http://www.vaikan.com/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/