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>

　　运行结果

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

angularJS---自定义过滤器的更多相关文章

  1. 创建 AngularJS 自定义过滤器，带自定义参数

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

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

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

  3. angularJS自定义 过滤器基础

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

  4. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  5. angularjs自定义过滤器

    实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...

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

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

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

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

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

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

  9. AngularJS中自定义过滤器

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

  10. angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）

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

随机推荐

  1. UTL_DBWS - Consuming Web Services in Oracle 10g Onward

    from:http://oracle-base.com/articles/10g/utl_dbws-10g.php In a previous article I presented a method ...

  2. 实战项目开发细节：C语言分离一个16进制数取出相应的位1或0

    最近在公司开发一个关于钢琴的PCBA项目,项目大概是这样的,完成各种功能的测试,准备去工厂量产的时候可以通过软件快速甄别硬件是否短路,断路等问题. 其中,甄别好坏的方法是通过比如按键,或者其它的操作然 ...

  3. 面试之路（7）-BAT面试题之计算机的三大原则

    1.计算机是执行输入.运算.输出的机器 计 算 机 的 硬 件 由 大 量 的 IC(Integrated Circuit,集成电路)组成.每块 IC 上都带有许多引脚.这些引脚有的用于输入,有的用于 ...

  4. ruby如何查找一个方法属于哪个类

    这是一个看似简单,实际不那么直接的问题.一种方法是先直接看当前对象的类是神马东东: puts self.class 或者 self.class.name 不过在某些情况下上述代码返回不了具体的名称,前 ...

  5. ruby 2.x.x之新特性散谈

    ruby入门看的是经典的<ruby编程语言>,可是那描述的是v1.9的老版本啊!下面聊一下ruby2.x.x的新特性,x是0-n都有可能啊. 1.关键字参数(Keyword argumen ...

  6. ELF 文件 动态链接 - 地址无关代码（GOT）

    Linux 系统中,ELF动态链接文件被称为 动态共享对象(DSO,Dynamic Shared Object),简称共享对象 文件拓展名为".so" 动态链接下 一个程序可以被分 ...

  7. Java IO学习--(五)字节和字符数组

    内容列表 从InputStream或者Reader中读入数组 从OutputStream或者Writer中写数组 在java中常用字节和字符数组在应用中临时存储数据.而这些数组又是通常的数据读取来源或 ...

  8. AVL树之 Java的实现

    AVL树的介绍 AVL树是高度平衡的而二叉树.它的特点是:AVL树中任何节点的两个子树的高度最大差别为1. 上面的两张图片,左边的是AVL树,它的任何节点的两个子树的高度差别都<=1:而右边的不 ...

  9. ORACLE数据库维护

    ORACLE数据库维护(转)----一篇关于oracle的不错的文章 1. ORACLE数据库启动与关闭   1.1 打开和关闭数据库 (手工)1.1.1 sqlplus连接   1.1.2 打开数据 ...

  10. 多台或者集群环境下如何保证spring定时器只执行一个

    先说一下我们的系统, 在65和66上分别部署有weblogic节点,共计四个,在项目中我们的定时器会隔一段时间就从其它的五个系统中取数据,这时就出现了问题,本来取一次数据就可以的,现在重复执行了三次, ...