angular的DEMO(用来练习和顺便看看)
inflector(辅助) 将用户输入的字符串转化成驼峰或者空格或者底线的小插件;
这个是一个小的过滤器, 平常也是用不到的, 合格是过滤器的代码:
app.filter("inflector", function() {
var reg = new RegExp("","gi");
return function(value ,type) {
switch( type ) {
case "underscore" :
value = value.replace(/[\s-_]/gi,"_");
break;
case "variable" :
value = value.replace(/[\s-_](\w)/gi,function($0,$1){
return $1.toUpperCase();
});
break;
default :
value = value.replace(/[\s-_]/gi," ");
break;
};
return value;
};
});
下面的全部的代码，点击按钮即可在线运行：
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body ng-controller="test0Controller">
<label>
<input type="radio" value="humanize" ng-model="inflectorType"> Humanize (Default)</label>
<label>
<input type="radio" value="underscore" ng-model="inflectorType"> Underscore</label>
<label>
<input type="radio" value="variable" ng-model="inflectorType"> Variable</label> <input placeholder="Enter some text to inflect" ng-model="inflectorText">
<p>{{inflectorText|inflector:inflectorType}}</p> <script>
//初始化用户模块;
var app = angular.module('app', []);
app.controller("test0Controller",function($scope){
$scope.inflectorText = "normal test_hehe-nice";
$scope.inflectorType = "humanize";
});
app.filter("inflector", function() {
var reg = new RegExp("","gi");
return function(value ,type) {
switch( type ) {
case "underscore" :
value = value.replace(/[\s-_]/gi,"_");
break;
case "variable" :
value = value.replace(/[\s-_](\w)/gi,function($0,$1){
return $1.toUpperCase();
});
break;
default :
value = value.replace(/[\s-_]/gi," ");
break;
};
return value;
};
});
</script>
</body>
</html>
这一个实例主要想表达的是通过自定义的指令绑定事件, angular官方提供的指令也是这样子的：
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body>
<div ng-controller="kepressController">
<textarea ui-keypress="keypressCallback">
</textarea>
</div>
<script>
//初始化用户模块;
var app = angular.module('app', []);
app.controller("kepressController",function($scope){
$scope.keypressCallback = function(e) {
e.target.value += "enter";
console.log(e)
alert("输入enter");
e.preventDefault();
};
}); app.directive("uiKeypress",function($parse) {
return {
scope : {
keypress : "&uiKeypress"
},
compile : function(elem, attrs) { return function(scope, $elem , $attrs ) {
$($elem).bind("keypress", function(ev) {
if( +ev.charCode === 13 ) {
scope.keypress()(ev);
};
});
}
}
}
}); </script>
</body>
</html>
这个又是一个过滤器的例子，直接通过一个闭包创建一个排序的函数，简单粗暴：
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body>
<div ng-controller="test0Controller">
<select ng-model="sortType">
<option value="firstName">firstName</option>
<option value="id">id</option>
<option value="gender">gender</option>
</select>
<div>
{{items | sort : sortType | json}}
</div>
</div>
<script>
//初始化用户模块;
var app = angular.module('app', []);
app.controller("test0Controller",function($scope){
$scope.inflectorText = "normal test_hehe-nice";
$scope.inflectorType = "humanize";
$scope.items = [
{ firstName: 'Dean', lastName: 'Sofer',
id: 1, gender: 'Male' },
{ firstName: 'Dean', lastName: 'Kuntz',
id: 2, gender: 'Male' },
{ firstName: 'Peter', lastName: 'Piper',
id: 3, gender: 'Female' },
{ firstName: 'Peter', lastName: 'Darwin',
id: 4, gender: 'Male' },
{ firstName: 'Janet', lastName: 'Piper',
id: 5, gender: 'Female' },
{ firstName: 'Dan', lastName: 'Doyon',
id: 6, gender: 'Male' },
{ firstName: 'Andy', lastName: 'Joslin',
id: 1, gender: 'Male' },
];
});
//排序的指令;
app.filter("sort",function() {
var sortClosure = function( name ){
return function(a,b) {
if( a[name] < b[name] ){
return -1;
}else{
return 1;
}
}
};
return function(value, type) {
var sortFn = sortClosure(type);
//return value.sort(sortFn);
return angular.copy(value).sort(sortFn);
};
}); </script>
</body>
</html>
总结：angular入门很简单的，但是提升比较难吧
angular的DEMO(用来练习和顺便看看)的更多相关文章
- Angular - - 脏值检查及其相关
今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容. 先以普通js来做一个简单的监控例子吧: var div = ducoment.getElementById("my ...
- 初识Angular
一.AngularJs简介 1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识 ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- anguar.js tutorial demo
http://docs.angularjs.cn/tutorial angular 入门demo : PhoneCat Tutorial App 别人的DEMO(官方版):http://angular ...
- angular 滚动
AngularJs $anchorScroll.$controller.$document $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到 ...
- 说说Angular中的$timeOut定时器
非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇 ...
- AngularJs angular.Module模块接口配置
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- AngularJs Angular数据类型判断
angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
随机推荐
- Linux学习之四——磁盘与文件系统管理
一.一些基本定义 1. superblock:记录此 filesystem 的整体信息,包括inode/block的总量.使用量.剩余量, 以及文件系统的格式与相关信息等:2. inode:记录档案的 ...
- windows上用netstat查看端口/进程占用
windows上用netstat命令查看某个端口是否占用,被哪个进程所占用 1.查看端口的占用情况,获取进程的PID 命令: netstat -ano | findstr "<端口号& ...
- [转]jQuery插件实现模拟alert和confirm
本文转自:http://www.jb51.net/article/54577.htm (function () { $.MsgBox = { Alert: function (title, msg) ...
- Java基本运算符
1.算术运算符 作用是数字的计算,包括:正号+,负号-,乘*,除/,余%,加+,减-,其算法与数学中的运算相同. 算术运算符实例(假设变量A=10,变量B=20): 操作符 描述 例子 + 正号 +A ...
- NOIP2008提高组(前三题) -SilverN
此处为前三题,第四题将单独发布 火柴棒等式 题目描述 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0 ...
- 常用中文字体 Unicode 编码
各大网站的字体选择 网站 字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 t ...
- BZOJ 2186 [Sdoi2008]沙拉公主的困惑 【逆元】
题意:求中互质的数的个数,其中. 分析:因为,所以,我们很容易知道如下结论 对于两个正整数和,如果是的倍数,那么中与互素的数的个数为 本结论是很好证明的,因为中与互素的个数为,又知道, ...
- Mecanim的Avater
角色共用同一套动作原理 先说说为什么不同的角色可以共用同一套动作:因为导入之后,我们需要为它们每一个模型都创建一个Avater,而Avater里存储了骨骼的蒙皮信息(创建Avater时把三维软件里的蒙 ...
- android初学问题集
1. Manifest中的Application tag用途? 2. java中的组件设计模型是指什么? 3. java Bean是指什么? 4. Proxy-Stub设计模式又指的是什么? 有要的网 ...
- 我们为什么要使用NodeJS
科普文一则,说说我对NodeJS(一种服务端JavaScript实现)的一些认识,以及我为什么会向后端工程师推荐NodeJS. "Node.js 是服务器端的 JavaScript 运行环境 ...