Angular学习（6）- 数组双向梆定+filter+directive
示例：
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Study 6</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" fraction-num />
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" fraction-num />
<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;
});
app.directive("fractionNum", function() {
return {
link: function(scope, elements, attrs, controller) {
elements[0].onkeyup = function() {
if (/\D/.test(this.value)) {
this.style.borderColor = 'red';
}
else {
this.style.borderColor = '';
}
};
}
};
});
</script>
</body>
</html>
Angular学习（6）- 数组双向梆定+filter+directive的更多相关文章
- Angular学习（5）- 数组双向梆定+filter
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 5< ...
- Angular学习（4）- 数组双向梆定
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 4< ...
- Angular学习（3）- 双向梆定
示例代码: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 3& ...
- angular学习的一些小笔记(中)之directive
directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...
- 【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...
- Angular 学习笔记——ng-repeat&filter
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- 【转】Angular学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
随机推荐
- CentOS 6.6 nginx PHP 配置
/************************************************************************* * CentOS 6.6 nginx PHP 配置 ...
- LeetCode Subsets II （DFS）
题意: 给一个集合,有n个可能相同的元素,求出所有的子集(包括空集,但是不能重复). 思路: 看这个就差不多了.LEETCODE SUBSETS (DFS) class Solution { publ ...
- linux服务器并发与tcmalloc
前一天使用pmap查看服务器中自己开发的游戏服务的内存使用情况,发现其中数据存储服务的内存占用率非常高,截图如下. 从截图中可以看出来,分配了大量的64MB左右的内存空间,因为对自己的服务比较了解,知 ...
- Sonar ＋ Jacoco，强悍的UT, IT 双覆盖率统计(转)
以前做统计代码测试覆盖,一般用Cobertura.以前统计测试覆盖率,一般只算Unit Test,或者闭上眼睛把Unit Test和Integration Test一起算. 但是,我们已经过了迷信UT ...
- Quantum & r2q
Quantum & r2q Let's assume we have 2 classes with the same parent : Parent : ceil = rate = 100 c ...
- PAT (Basic Level) Practise：1039. 到底买不买
[题目链接] 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有 ...
- strong和b
strong和b标签都是很久以前遗留下来的标签,b标签用来加粗字体,strong用来强调,通常浏览器会把强调的语句加粗,所以二者效果比较近似.语义化愈发受重视以后,b标签退出大众视野,strong依然 ...
- hive-jdbc/odbc的解读和看法
当前的项目中, 涉及到了hive-jdbc/odbc这块, 因此把这几天所调研的资料作一份总结.本文讲解hive-jdbc/hive-odbc的实现, 以期对jdbc/odbc规范和实现有个较深入的理 ...
- 灰度图像的自动阈值分割（Otsu 法）（转载）
灰度图像的自动阈值分割(Otsu 法) 机器视觉领域许多算法都要求先对图像进行二值化.这种二值化操作阈值的选取非常重要.阈值选取的不合适,可能得到的结果就毫无用处.今天就来讲讲一种自动计算阈值的方法. ...
- html中怎么去掉input获取焦点时候的边框
如图 这个是在360浏览器极速模式下的效果 有个颜色的边框,,但是在兼容模式下就可以的呢 看看兼容模式下的效果 很显然 上面那个被高亮了,焦点的时候有边框 要怎么弄才能让他始终没有边框呢 2014 ...