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入门很简单的，但是提升比较难吧