angular的DEMO(用来练习和顺便看看)
Angular 练习 Demo 看看 用来
2023-09-11 14:17:26 时间
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] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] Learn Angular Multi-Slot Content Projection
- [AngularJS] angular-md-table for Angular material design
- [AngularJS] Angular 1.3 $submitted for Form in Angular
- [Angular] $q.all()
- [Angular] Dynamic replacement for index.html
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] HostListener Method Arguments - Blocking Default Keyboard Behavior
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular2 Animation] Delay and Ease Angular 2 Animations
- [Angular 2] Using events and refs
- Angular 项目里 angular.json 文件内容的学习笔记
- SAP Spartacus中使用到的Angular ModuleWithProviders类型
- Angular InjectionToken APP_INITIALIZER 的实现方法介绍
- Angular jasmine单元测试框架里spyOn的创建原理
- Angular Component模板里的元素,运行时如何被生成并插入到DOM tree中
- npm publish 发布一个 Angular 库的时候报错
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 如何通过 HTTP Interceptor 实现 HTTP 请求的超时监控
- Angular 如何使用 InjectionToken 的方式得到当前 location 信息
- 使用 Angular Universal 实现服务器端渲染
- Angular 依赖注入的学习笔记
- angular 拼接html 事件无效