Angular学习（5）- 数组双向梆定+filter
示例：
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Study 5</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" />
Type:<select ng-model="model.type"><option value="1" selected>Radio</option><option value="2">CheckBox</option></select>
<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.type | typeFilter}}]{{model.name}}</b>({{model.fraction}})
<ul>
<li ng-repeat="item in model.options">
<b>{{$index + 1}}</b>
<input type="radio" name="optcheck" ng-show="model.type==1" />
<input type="checkbox" ng-show="model.type==2" />
{{item.content}}
</li>
</ul>
</div>
<hr />
{{nowTime | date : "yyyy-MM-dd HH:mm:ss"}}
</div>
<script type="text/javascript">
var app = angular.module("MyApp", [], function() { });
var myModel = {
newTitle: "Title",
previewTitle: "Preview Title",
name: "Robin",
fraction: "100",
type : 1,
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);
};
$scope.nowTime = new Date();
});
app.filter("typeFilter", function() {
var func = function(value) {
return value == 1 ? "Single Select" : "Multi Select";
};
return func;
});
</script>
</body>
</html>
Angular学习（5）- 数组双向梆定+filter的更多相关文章
- Angular学习（6）- 数组双向梆定+filter+directive
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 6< ...
- Angular学习（4）- 数组双向梆定
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 4< ...
- Angular学习（3）- 双向梆定
示例代码: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 3& ...
- 【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...
- Angular 学习笔记——ng-repeat&filter
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- 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 ...
随机推荐
- LeetCode Permutations II （全排列）
题意: 给出n个元素(可能有重复的),请产生出所有的全排列. 思路: 同版本1的有点不同,这次有可能含有重复的元素,很容易就TLE,节省时间才是关键点. 如果将一个序列中两个相同的元素交换,这个序列是 ...
- dede文章摘要字数的设置方法
本文转自:http://blog.csdn.net/yxwmzouzou/article/details/17491991 在织梦系统中(针对5.7版本),文章摘要(可以通过以下四种相关标签调用)被设 ...
- test Windows Live Writer
1, 下载Live Writer http://windows.microsoft.com/zh-cn/windows-live/essentials-other#essentials=overvie ...
- 跟开涛老师学shiro -- 身份验证
身份验证,即在应用中谁能证明他就是他本人.一般提供如他们的身份ID一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明. 在shiro中,用户需要提供principals (身份)和cre ...
- （实用篇）php 文件夹删除，清除缓存程序
<?php header('content-type:text/html;charset=utf-8'); function delFile($fpath) { $filesize = arra ...
- 长方形—C++
编程之美一道简单的热身题,活生生的组合数学例子啊. 题意如下: 在 N 条水平线与 M 条竖直线构成的网格中,放 K 枚石子,每个石子都只能放在网格的交叉点上.问在最优的摆放方式下,最多能找到多少四边 ...
- Android开源项目大全之工具库
http://www.neast.cn/forum.php?mod=viewthread&tid=5487&fromuid=5
- Codeforces Round #120 (Div. 2)
A. Vasya and the Bus 根据\(n,m\)是否为0分类讨论下. B. Surrounded 判断两圆是否有交点,否则构造的圆与两圆相切. C. STL 看代码比较清楚. void t ...
- 【LOI2005】【P1306】河流
树归题,本来比较简单,但是因为几个思想搞错了,所以卡了两天 原题: 几乎整个Byteland 王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河, ...
- jQuery 1.10.3 参考手册
Jquery是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7 ...