【AngularJS】—— 9 自定义过滤器
AngularJS另一个特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。
通过使用管道，可以便于双向的数据绑定中视图的展现。
过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。
实现方式
下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule
var myAppModule = angular.module("myApp",[]);
接下来在模块的基础上，创建过滤器：
myAppModule.filter("reverse",function(){
});
其中reverse是过滤器的名字，后面跟着过滤器的方法声明，在方法中返回另一个方法：
myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
内部返回的方法包含了两个参数，一个是输入的值，就是我们过滤器接受的值。
如果想要实现下面的过滤器：
name | reverse
则input就是其中name代表的值。
后面的参数是可选的，我们这里接受uppercase这个bool值，判断是否要进行大小写转换。
内部实现的代码，就没必要解释了。最后返回过滤后的字符串即可。
程序样例
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body> <div ng-controller="myAppCtrl">
name:{{ name }}<br>
reverse name:{{ name | reverse }}<br>
reverse&uppercase name:{{ name | reverse:true }}
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",["$scope",function($scope){
$scope.name = "xingoo";
}]); myAppModule.filter("reverse",function(){
return function(input,uppercase){
var out = "";
for(var i=0 ; i<input.length; i++){
out = input.charAt(i)+out;
}
if(uppercase){
out = out.toUpperCase();
}
return out;
}
});
</script>
</body>
</html>
运行结果
【AngularJS】—— 9 自定义过滤器的更多相关文章
- 关于angularjs 中自定义过滤器
包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...
- AngularJS中自定义过滤器
AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...
- AngularJS：自定义过滤器
表达式: {{ expression | filter1 | filter2 | ... }} {{ expression | filterName : paramet ...
- AngularJs练习Demo8 自定义过滤器
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- 创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- AngularJS实现的自定义过滤器简单示例
本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- angularJS自定义过滤器、服务和指令
自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } }); 自定义创建指令 mainA ...
- angularJS自定义 过滤器基础
先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...
- angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- angularJs的过滤器扩展及自定义过滤器
一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...
随机推荐
- 对接微信红包时：CA证书出错，请登录微信支付商户平台下载证书
今天在对接微信支付的微信红包发放时,出现““CA证书出错,请登录微信支付商户平台下载证书”的错误,特此记录一下: 如果你也在对接微信红包,并且你也在这个页面上下载了demo,再就是你也参照了里面的文档 ...
- genymotion访问电脑的localhost
用来进行android测试时使用genymotion,genymotion是运行在virtualbox中的,virtualbox为两者建立了连接,在linux下通过ifconfig可以看到有一个叫做v ...
- AngularJs angular.identity和angular.noop
angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: (function () { angular.modul ...
- 如何执行一条命令在C#里面。Process
Download source - 4.15 KB Introduction It is normal practice to open the Windows command prompt and ...
- bootstrap学习总结-04 常用标签2
1 表格 Bootstrap为表格设计了漂亮的样式. 1)表格基本实例 任意 <table> 标签添加 .table. <table class="table"& ...
- BZOJ1180: [CROATIAN2009]OTOCI
传送门 一遍AC,开心! $Link-Cut-Tree$最后一题 //BZOJ 1180 //by Cydiater //2016.9.18 #include <iostream> #in ...
- COCI2011:友好数对
校内OJ传送门 一般容斥,具体思想参考代码实现,刚开始是在读入时处理所有数的二进制子集,没看$N$的范围以为复杂度不会爆炸.. 然后复杂度就爆炸了. 小优化: 每次整个载入二进制,计数.这个结束后枚举 ...
- Objective-C学习笔记之NSData、NSDate
NSData和NSMutableData存储的是二进制数据,在文件操作,网络,以及核心图形图像中使用较广泛.NSData创建后不可以再修改,NSMutableData可以再次修 NSString *s ...
- IOS 中的CoreImage框架（framework）
http://www.cnblogs.com/try2do-neo/p/3601546.html coreimage framework 组成 apple 已经帮我们把image的处理分类好,来看看它 ...
- C++中引用与指针的区别(详细介绍)
C++中引用与指针的区别(详细介绍) C++中的引用与指针的区别 指向不同类型的指针的区别在于指针类型可以知道编译器解释某个特定地址(指针指向的地址)中的内存内容及大小,而void*指针则只表示一 ...