过滤器实质是数据转换或过滤，把ViewMode中的数据转化成View层用户友好的信息。可以看做一个函数，负责接收输入，转换成输出，每次参数变化时，它就被执行，输出被视图View使用.

一、基本定义及其使用（绑定表达式）

1、定义

　　View中直接用一下格式使用：（可以多个参数）

　　{{待过滤数据 | 过滤器名：参数1：参数2：参数3.....}}

　　对应的过滤器定义（返回函数）:

　　app.filter('过滤器名', function () {

　　　　return function (待过滤数据, 参数....) { .

　　　　　　.....

　　　　　　return 已过滤数据;

　　　　 }　

　　}

2、例子

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

       <div ng-controller="MyController">

            原始值: {{ name }}<br>

            倒序: {{ name | reverse }}<br>

            倒序并大写: {{ name | reverse:true }}

    </div>

        <script type="text/javascript">

            var myModule = angular.module("myApp",[]);

            myModule.controller('MyController', function($scope){

        　　　　$scope.name = "abc";

            })

            myModule.filter("reverse", function () {

            return function (input, uppercase) {

                <!--input就是其中name代表的值。-->

                <!--uppercase这个bool值，判断是否要进行大小写转换。-->

                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>

　　运行结果：

　　

3、用法总结

（1）、{{ expression | filter }} 最常用用法

（2）、{{ expression | filter1 | filter2 | ... }}   多个过滤器连续使用的管道用法

（3）、{{ expression | filter : argument1 : argument2 : ... }} 有多个参数的过滤器、

（4）、<span ng-repeat="a in array | filter "> 先用过滤器处理，在循环输出

二、控制器或服务中使用

　　使用过滤器前要在控制器或服务中使用。如currencyFilter是个过滤器，要注入

app.controller('MyCtroller',function($scope,currencyFilter){

  $scope.num = currencyFilter(123456);

}

　　当需要多个过滤器时候，就需要注入多个，有个简便的只需要注入一个$filter服务就行，调用方式$filter（‘过滤器名’）（‘’带过滤数据‘’），如下

app.controller('MyCtroller',function($scope,$filter){

  $scope.num = $filter("currency")(123456);

  $scope.name= $filter("'date'")(new Date());

}

三、内置9个过滤器

1、currency (货币处理)

　　可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如人民币参数 '￥'：

　　{{num | currency : '￥'}}

2、date (日期格式化)

　　原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：

　　{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

　　参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。

　　另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为12:05 pm。

3、filter(匹配子串)

　　用来处理一个数组，可以过滤出含有某个子串 的元素，作为一个子数组来返回。

　　可以是字符串数组，也可以是对象数组。

　　如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。

　　下面 举个例子说明一下参数的用法：

　　$scope.childrenArray = [
　　　　{name:'kimi',age:3},
　　　　{name:'cindy',age:4},
　　　　{name:'anglar',age:4},
　　　　{name:'shitou',age:6},
　　　　{name:'tiantian',age:5}
　　];

　　$scope.func = function(e){

　　　　return e.age>4;

　　};

　　{{ childrenArray | filter : 'a' }}     //匹配属性值中含有a的
　　{{ childrenArray | filter : 4 }}    //匹配属性值中含有4的
　　{{ childrenArray | filter : {name : 'i'} }}    //参数是对象，匹配name属性中含有i的
　　{{childrenArray | filter : func }}   //参数是函数，指定返回age>4的

4、 json(格式化json对象)

　　json过滤器可以把一个js对象格式化为json字符串，没有参数。

　　一般也不会在页面上输出一个json串，官网说可以用来进行调试。

　　也可以用在js中使用，作用就和我们熟悉的JSON.stringify()一样。

　　用法：

　　　　{{ jsonTest | json}}

5、 limitTo(限制数组长度或字符串长度)

　　截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。

　　{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

6、 lowercase(小写)

　　把数据转化为全部小写。

7、uppercase(大写)

　　同上。

8、number(格式化数字)

　　为一个数字加上千位分割，如，123,456,789。同时接收一个参数，可以指定float类型保留几位小数：

　　{{ num | number : 2 }}

9、 orderBy(排序)

　　将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。

　　可以是 一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）：

　　<div>{{ childrenArray | orderBy : 'age' }}</div>  //按age属性值进行排序，若是-age，则倒序
　　<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
　　<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序

　

AngularJS 过滤器 Filter的更多相关文章

  1. AngularJS过滤器filter入门

    在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...

  2. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  3. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  4. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  5. 【angularJS】Filter 过滤器

    当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在AngularJS中有常见默认的过滤器,当然若不满足所需,我们可以自定义 ...

  6. AngularJS的过滤器$filter

    过滤器(filter)主要用于数据的格式上,通过某个规则,把值处理后返回结果.例如获得数据集,可排序后再返回. ng内置的共有九种过滤器: currency 货币 使用currency可以将数字格式化 ...

  7. AngularJS 笔记系列（五）过滤器 filter

    过滤器是用来格式化给用户展示的数据的. 在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器. 大写:{{ name | uppercase }} 也可以在 JS 中进行调用$filter ...

  8. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  9. AngularJS过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中. 再次强调一点,所有的运行都要加入angularJS的库文件(类似JQuery的引用) 常见的AngularJS 过滤器 (1) lowerc ...

随机推荐

  1. git的命令详解

    # git三个区 + 工作区: 写代码的地方 + 暂存区: 暂时存储代码 + 仓库区: 代码提交到了仓库区,就生成一条历史记录(版本) 工作区===> 暂存区 ===> 仓库区 # git ...

  2. About the Cron Expression

    About the Cron Expression Cron is use in Linux for the time schedule Format Seconds Minutes Hours Da ...

  3. Spring Environment（二）源码分析

    Spring Environment(二)源码分析 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring Envi ...

  4. Spring ApplicationContext（六）BeanPostProcessor

    Spring ApplicationContext(六)BeanPostProcessor 产生回顾一下 ApplicationContext 初始化的几个步骤:第一步是刷新环境变量:第二步是刷新 b ...

  5. 轻博客类Web原型制作分享——Tumblr

    Tumblr(汤博乐)成立于2007年,是目前全球最大的轻博客网站,也是轻博客网站的始祖. Tumblr是一种介于传统博客和微博之间的全新媒体形态,既注重表达,又注重社交,而且注重个性化设置,成为当前 ...

  6. c++智能指针(2)

    追加一个shared_ptr指针 #include <memory> using namespace std; int _tmain(int argc, _TCHAR* argv[]) { ...

  7. js Array 方法总结

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. TabControl中显示和隐藏TabPage页

    在使用TabControl控件时,希望隐藏其中某个选项卡(即TabPage).TabPage类明明提供了一个Hide方法,用在代码中却没有任何效果,甚是奇怪.无奈之余,只好考虑另辟途径 方法一: 设置 ...

  9. ARM cortexM4中断优先级的一点理解。

    根据手册PM0214 40页.213页.200.195.interrupt priority grouping. 根据手册EM0090 第371页. stm32f42xxx除掉fpu部分,有91个可屏 ...

  10. kbmmw 5.06.00 beta 发布

    原生.高效.可扩展.跨平台通信库来了. we are happy to announce v5.06.00 BETA of our popular middleware for Delphi and  ...