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 自定义过滤器的更多相关文章

  1. 关于angularjs 中自定义过滤器

    包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...

  2. AngularJS中自定义过滤器

    AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...

  3. AngularJS:自定义过滤器

    表达式:         {{ expression | filter1 | filter2 | ... }}         {{ expression | filterName : paramet ...

  4. AngularJs练习Demo8 自定义过滤器

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  5. 创建 AngularJS 自定义过滤器,带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJS实现的自定义过滤器简单示例

    本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  7. angularJS自定义过滤器、服务和指令

    自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } });   自定义创建指令 mainA ...

  8. angularJS自定义 过滤器基础

    先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...

  9. angularjs学习第三天笔记(过滤器第二篇---filter过滤器及其自定义过滤器)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  10. angularJs的过滤器扩展及自定义过滤器

    一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...

随机推荐

  1. MyCCL特征码定位原理学习

    这段时间学习WEB方面的技术,遇到了木马免杀特征码定位的问题,这里做一下学习笔记. 这里对MyCCL的分块原理做一下探究 对指定文件生成10个切块 对指定的木马进行切块后,文件列表是这样的. 注意这里 ...

  2. 拉曼软件在win8上运行出错问题

    前提:xp上安装运行都没错  xp的.NET 环境是4.0 ,win8 是64位系统.自带.NET Framework 3 (3.0 3.5) 和.NET Framework 4.51:源程序拷贝到w ...

  3. 修改oracle系统用户system的密码

    C:\Users\Administrator>echo %ORACLE_SID% %ORACLE_SID% C:\Users\Administrator>set ORACLE_SID=or ...

  4. 如何在Visual Studio 2013中使用Ribbon For WPF

    1.首先需要 下载Ribbon For WPF.目前最新的版本是Microsoft Ribbon for WPF October 2010. 下载 链接: https://www.microsoft. ...

  5. JPA事务总结

    http://www.soso.io/article/65405.html 事务管理是JPA中另一项重要的内容,了解了JPA中的事务管理,能够进一步掌握JPA的使用.事务管理是对一系列操作的管理,它最 ...

  6. jQuery知识点总结(第四天)

    前三天是jQuery的基础部分,选择器学好了.才能进行下一步的操作,如果前三天没学过没学好,不要跳着学.粗俗的话叫做,步子大了,容易扯着蛋.一步一个脚印,是最好的方式. 强调一下.有问题,不要憋着不讲 ...

  7. POJ3114 Countries in War (强连通分量 + 缩点 + 最短路径 + 好题)

    题目链接 题意是说在几个邮局之间传送一份信件,如果出发点和终止点在同一个国家传递,则时间为0,否则让你求花费最少时间,如果不能传到,则输出Nao e possivel entregar a carta ...

  8. Saltstack之SSH(十一)

    Saltstack之SSH 安装 yum install -y salt-ssh 官方文档  https://docs.saltstack.com/en/latest/topics/ssh/index ...

  9. Lambda表达式 和 Expression<T>

    经常用的Lambda表达式 返回的是  Expression<T> 格式 public class ActivityService { private readonly List<A ...

  10. 分页探究--Filter+JSTL

    最近卡了一个功能就是分页,查了很多资料,分页大概是两种类型:一种是把数据库的东西全部查出来然后放在session里,用list一页一页传到页面,这样的消耗比较大;另一种就是使用sql语句的limit来 ...