示例:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Study 4</title>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
<div ng-controller="testController">
<h1>{{model.newTitle}}</h1>
Name:<input type="text" ng-model="model.name" />
Fraction:<input type="text" ng-model="model.fraction" />
<input type="button" ng-click="add(model.fraction)" value="Add" />
<ul>
<li ng-repeat="item in model.options">
<b>{{$index+1}}</b>
<input type="text" ng-model="item.content" value="item.content" />
<a href="javascript:void(0)" ng-click="del($index)">Delete</a>
</li>
</ul>
<hr />
<div>
<h1>{{model.previewTitle}}</h1>
<b>{{model.name}}</b>({{model.fraction}})
<ul>
<li ng-repeat="item in model.options">
<b>{{$index + 1}}</b>
<input type="radio" name="rdCheck" />
{{item.content}}
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var app = angular.module("MyApp", [], function() { });
var myModel = {
newTitle: "Title",
previewTitle: "Preview Title",
name: "Robin",
fraction: "100",
options: []
};
app.controller("testController", function($scope) {
$scope.model = myModel;
$scope.add = function(text) {
var obj = { content: text };
$scope.model.options.push(obj);
};
$scope.del = function(index) {
$scope.model.options.splice(index, 1);
};
});
</script>
</body>
</html>

Angular学习(4)- 数组双向梆定的更多相关文章

  1. Angular学习(6)- 数组双向梆定+filter+directive

    示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 6< ...

  2. Angular学习(5)- 数组双向梆定+filter

    示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 5< ...

  3. Angular学习(3)- 双向梆定

    示例代码: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 3& ...

  4. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  5. Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

  6. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  7. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  8. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  9. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

随机推荐

  1. Redis 设计与实现读书笔记一 Redis字符串

    1 Redis 是C语言实现的 2 C字符串是 /0 结束的字符数组 3 Redis具体的动态字符串实现 /* * 保存字符串对象的结构 */ struct sdshdr { // buf 中已占用空 ...

  2. USB Packet Types

    USB has four different packet types. Token packets indicate the type of transaction to follow, data ...

  3. C特殊浮点值NaN

    特殊浮点值NaN(Not-a-Number),例如asin()函数返回反正弦值,所以输入参数不能大于1,否则函数返回NaN值,printf()显示为nan,NaN或类似形式.

  4. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. js/jsp清空表单2种方法

    js方式清空表单数据的两种方式 方法1:遍历页面元素 /* 清空FORM表单内容  id:表单ID*/  function ClearForm(id) {     var objId = docume ...

  6. scala言语基础学习十二

  7. about JNI

    1.Java对C/C++事件处理的封装JIT(Just in Time.Java语言的原动态编译技术) 大多数的游戏引擎都是使用可移植的C语言开发的,然后通过简单的封装以适应特殊的平台. 2.Andr ...

  8. PHP 文件迭代器

    使用了SPL的 迭代器, 可以直接对打开的文件进行foreach读取, 类的构造如下 class fileIterator implements Iterator { private $fp; pri ...

  9. linux工具类之硬盘检测

    软raidmount /dev/md0 /opt                [root@localhost root]# cp /usr/share/doc/raidtools-1.00.3/ra ...

  10. wikioi 1688 求逆序对

    /*=========================================================== wikioi 1688 求逆序对 时间限制: 1 s 空间限制: 12800 ...