Angular学习(4)- 数组双向梆定
示例:
<!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)- 数组双向梆定的更多相关文章
- Angular学习(6)- 数组双向梆定+filter+directive
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 6< ...
- Angular学习(5)- 数组双向梆定+filter
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 5< ...
- Angular学习(3)- 双向梆定
示例代码: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 3& ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
- 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的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
随机推荐
- LinearLayout 控件
LinearLayout 控件,垂直显示各控件一行一个显示,比较好控件. 用RelativeLayout多个控件会堆在一起 <LinearLayout xmlns:android="h ...
- 怎样知道linux是否安装了mysql
1. 使用 [root@localhost Desktop]# rpm -qa |grep mysql (-qa查询已经安装的软件) mysql-libs-5.1.71-1.el6.x86_64 结果 ...
- Linux 常用命令笔记
Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...
- addcontentView之后如何让这个view消失掉
Dia dialog ; public void go(View view){ dialog = (Dia) getLayoutInflater().inflate(R.layout.main, nu ...
- Debian中如何切换默认Python版本
当你安装 Debian Linux 时,安装过程有可能同时为你提供多个可用的 Python 版本,因此系统中会存在多个 Python 的可执行二进制文件,你可以按照以下方法使用 ls 命令来查看你的系 ...
- ZOJ 1115 Digital Roots
原题链接 题目大意:给一个数字,每一位相加求和,不断重复过程,直到剩一位数字. 解法:考虑到输入的数字可以很大,把输入按照字符串格式读入,再逐位处理. 参考代码: #include <iostr ...
- ZOJ 1045 HangOver
原题链接 题目大意:叠扑克牌,给出伸出长度,问最多需要几张扑克牌. 解法:循环累加.退出循环后向上取整输出. 参考代码: #include<iostream> using namespac ...
- javaio-printwriter
转自http://www.cnblogs.com/skywang12345/p/io_25.html PrintWriter 介绍 PrintWriter 是字符类型的打印输出流,它继承于Writer ...
- C++ Primer : 第二章:变量和基本类型(1)
变量和基本类型之第一篇:基本内置类型和变量 一. (1) C++定义了一套包括算数类型和空类型,这些类型有:布尔类型bool,字符类型char,宽字符类型wchar_t,Unicode字符char16 ...
- c 函数及指针学习 8
联合体 1 2 3 4 5 6 7 8 9 10 11 12 13 #include <stdio.h> union sa { double a; int b; ...