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. GitHub项目大全

    [微信网页版]: [查看被删的微信好友]https://github.com/0x5e/wechat-deleted-friends [网页版微信API,包含终端版微信及微信机器人]https://g ...

  2. hdu 5233 离散化

    10^9的大数组显然开不了.所以也算比较裸的离散化了... 令pos[i].pp[j]表示从左到右第j个高度为i的树的位置 (pp是个vector,范围0..now-1) pos[i].num表示有几 ...

  3. Centos提示-bash: make: command not found的解决办法

    一般出现这个-bash: make: command not found提示,是因为安装系统的时候使用的是最小化mini安装,系统没有安装make.vim等常用命令,直接yum安装下即可: yum - ...

  4. 连续赋值与求值顺序var a = {n:1};a.x = a = {n:2}; alert(a.x);

    代码如下: <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined ...

  5. 分析python程序运行时间的几种方法

    最早见过手写的,类似于下面这种: 1 import datetime 2 3 def time_1(): 4 begin = datetime.datetime.now() 5 sum = 0 6 f ...

  6. 【项目】'NSRangeException', reason: '*** -[__NSArrayM removeObjectAtIndex:]: index 2 beyond bounds [0 .. 1]'

    问题代码: [self.assetsArray objectAtIndex:indexPath.row] 问题解决思路:这里

  7. python不同模式打开文件的完全列表

    模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针将会放在文件的开头.这是默认模式. r+ 打开一个文件用于读写.文件指 ...

  8. JavaWeb---总结(八)HttpServletResponse对象(二)

    一.HttpServletResponse常见应用--生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: 1 package gacl ...

  9. SaltStack之无Master和多Master（九）

    SaltStack之无Master和多Master Masterless架构,无Master 实现方式: 1)关闭minion进程 2)修改配置文件 vi /etc/salt/minion file_ ...

  10. join的理解

    thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B. t.join( ...