上一篇讲了自定义Directive，本篇是要讲到AngularJS的Filter。
Filter简介
Filter是用来格式化数据用的。
Filter的基本原型（ '|' 类似于Linux中的管道模式）：
{{ expression | filter }}
Filter可以被链式使用（即连续使用多个filter）：
{{ expression | filter1 | filter2 | ... }}
Filter也可以指定多个参数：
{{ expression | filter:argument1:argument2:... }}
AngularJS内建的Filter
AngularJS内建了一些常用的Filter，我们一一来看一下。
currencyFilter（currency）：
用途：格式化货币
方法原型：
function(amount, currencySymbol, fractionSize)
1 {{ 12 | currency}}
&!--将12格式化为货币，默认单位符号为 '$', 小数默认2位--&
3 {{ 12.45 | currency:'￥'}} &!--将12.45格式化为货币，使用自定义单位符号为 '￥', 小数默认2位--&
5 {{ 12.45 | currency:'CHY￥':1}} &!--将12.45格式化为货币，使用自定义单位符号为 'CHY￥', 小数指定1位, 会执行四舍五入操作 --&
7 {{ 12.55 | currency:undefined:0}} &!--将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入 --&
dateFilter（date）：
用途：格式化日期
方法原型：
function(date, format, timezone)
&!--使用ISO标准日期格式 --&
{{ 'T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}
&!--使用13位（单位：毫秒）时间戳 --&
{{ 3 | date:"MM/dd/yyyy @ h:mma"}}
&!--指定timezone为UTC --&
{{ 3 | date:"MM/dd/yyyy @ h:mma":"UTC"}}
filterFilter（filter）：
用途：过滤数组
方法原型：
function(array, expression, comparator)
用法1（参数expression使用String）：
1 &div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"&
&!-- 参数expression使用String，将全文搜索关键字 'a' --&
&div ng-repeat="u in myArr | filter:'a' "&
&p&Name:{{u.name}}&/p&
&p&Age:{{u.age}}&/p&
用法2（参数expression使用function）：
1 // 先在Controller中定义function: myFilter
2 $scope.myFilter = function (item) {
return item.age === 20;
6 &div ng-repeat="u in myArr | filter:myFilter "&
&p&Name:{{u.name}}&/p&
&p&Age:{{u.age}}&/p&
用法3（参数expression使用object）：
1 &div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"&
&div ng-repeat="u in myArr | filter:{age: 21} "&
&p&Name:{{u.name}}&/p&
&p&Age:{{u.age}}&/p&
用法4（指定comparator为true或false）：
1 &div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"&
Name:&input ng-model="yourName" /&
&!-- 指定comparator为false或者undefined，即为默认值可不传，将以大小写不敏感的方式匹配任意内容 --&
&!-- 可以试试把下面代码的comparator为true，true即大小写及内容均需完全匹配 --&
&div ng-repeat="u in myArr | filter:{name:yourName}:false "&
&p&Name:{{u.name}}&/p&
&p&Age:{{u.age}}&/p&
用法5（指定comparator为function）：
1 // 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文
2 $scope.myComparator = function (expected, actual) {
return angular.equals(expected.toLowerCase(), actual.toLowerCase());
6 &div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"&
Name:&input ng-model="yourName" /&
&div ng-repeat="u in myArr | filter:{name:yourName}:myComparator "&
&p&Name:{{u.name}}&/p&
&p&Age:{{u.age}}&/p&
jsonFilter（json）：
&方法原型：
function(object, spacing)
用法（将对象格式化成标准的JSON格式）：
{{ {name:'Jack', age: 21} | json}}
limitToFilter（limitTo）：
&方法原型：
function(input, limit)
用法（选取前N个记录）：
1 &div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]"&
&div ng-repeat="u in myArr | limitTo:2"&
&p&Name:{{u.name}}
&p&Age:{{u.age}}
lowercaseFilter（lowercase）/uppercaseFilter（uppercase）：
&方法原型：
function(string)
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.
numberFilter（number）:
方法原型：
function(number, fractionSize)
{{ "3456789" | number}}
{{ true | number}}
| number:1}}
orderByFilter（orderBy）：
方法原型：
function(array, sortPredicate, reverseOrder)
1 &div ng-init="myArr = [{name:'Tom', age:20, deposit: 300}, {name:'Tom', age:22, deposit: 200}, {name:'Tom Senior', age:50, deposit: 200}, {name:'May', age:21, deposit: 300}, {name:'Jack', age:20, deposit:100}, {name:'Alice', age:22, deposit: 150}]"&
&!--deposit前面的'-'表示deposit这列倒叙排序，默认为顺序排序
参数reverseOrder：true表示结果集倒叙显示--&
&div ng-repeat="u in myArr | orderBy:['name','-deposit']:true"&
&p&Name:{{u.name}}&/p&
&p&Deposit:{{u.deposit}}&/p&
&p&Age:{{u.age}}&/p&
自定义Filter
和Directive一样，如果内建的Filter不能满足你的需求，你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter：capitalize_as_you_want，该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。
方法原型：
function (input, capitalize_index, specified_char)
完整的示例代码：
1 &!DOCTYPE&
&script src="/Scripts/angular.js"&&/script&
&script type="text/javascript"&
(function () {
var app = angular.module('ngCustomFilterTest', []);
app.filter('capitalize_as_you_want', function () {
return function (input, capitalize_index, specified_char) {
input = input || '';
var output = '';
var customCapIndex = capitalize_index || -1;
var specifiedChar = specified_char || '';
for (var i = 0; i & input. i++) {
// 首字母肯定是大写的， 指定的index的字母也大写
if (i === 0 || i === customCapIndex) {
output += input[i].toUpperCase();
// 指定的字母也大写
if (specified_char != '' && input[i] === specified_char) {
output += input[i].toUpperCase();
output += input[i];
40 &/head&
41 &body ng-app="ngCustomFilterTest"&
&input ng-model="yourinput" type="text"&
Result: {{ yourinput | capitalize_as_you_want:3:'b' }}
45 &/body&
46 &/html&
好了，本篇讲了AngularJS中的Filter，看完这篇后，我们可以利用好Filter非常方便的使数据能按我们的要求进行展示，从而使页面变得更生动。
AngularJS官方文档：
CodeSchool快速入门视频：
Fun with AngularJS filter:&
阅读(...) 评论()AngularJS的内置过滤器详解
投稿：hebedich
字体：[ ] 类型：转载 时间：
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。
今天我们来了解一下AngularJS的内置过滤器
先来看看这些内置过滤器使用方法:
一个过滤器，不带参数的情况
{{expression | filter}}
一个过滤器，带参数的情况
{{expression | filter:arguments}}
一个过滤器，带多个参数的情况
{{expression | filter: arg1: arg2: ...}}
多个过滤器，不带参数的情况
{{expression | filter1 | filter2 | ...}}
下面我们分别使用以下AngularJS的内置过滤器
currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。
可以这样使用：{{ 3600 | currency: "$￥"}}
返回结果为$￥123.00
number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数
如果传入的是一个非数字字符，会返回空字符串
可以这样使用：{{ 3600 | number:2}}
返回结果为：3,600.00
lowercase将字符串转换为小写
可以这样使用：{{ "HEllo" | lowercase}}
返回结果为：hello
uppercase将字符串转换为大写
可以这样使用：{{ "HEllo" | uppercase}}
返回结果为：HELLO
json过滤器可以将一个JSON或者JavaScript对象转换成字符串。
这个过滤器对调试相当有用
可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为：{ "name": "dreamapple", "language": "AngularJS" }
date过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。
这个过滤器用法很多我这里列举几种常用的
{{ today | date: "yyyy - mm - dd"}}
结果为：2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
结果为：2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)
还有三个内置的过滤器，但是使用稍微复杂一点，放在下一篇文章中我们大家一起探讨吧
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具详解AngularJS中的filter过滤器用法
我的图书馆
详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，angularjs的filter功能可分为二种，一种是内置的过滤器，一种是自定义的。
一，内置的过滤器1，uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }}&& //结果：LOWER CAP STRING&
{{ "TANK is GOOD" | lowercase }}&&&& //结果：tank is good
& ｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的2，json格式化
{{ {foo: "bar", baz: 23} | json }}& //结果：{ "foo": "bar", "baz": 23 }
注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。3，date格式化
{{ 4 | date }}&&&&&&&&&&&& //结果：May 3, 2011&
{{ 4 | date:"MM/dd/yyyy @ h:mma" }}&& //结果：05/03/2011 @ 6:39AM&
{{ 4 | date:"yyyy-MM-dd hh:mm:ss" }}& //结果： 06:39:08
4，number格式化
{{ 1.234567 | number:1 }}& //结果：1.2&
{{ 1234567 | number }}&&& //结果：1,234,567
5，currency货币格式化
{{ 250 | currency }}&&&&&&&& //结果：$250.00&
{{ 250 | currency:"RMB ￥ " }}&&& //结果：RMB ￥ 250.00
6，filter查找
{{ [{"age": 20,"id": 10,"name": "iphone"},&
{"age": 12,"id": 11,"name": "sunm xing"},&
{"age": 44,"id": 12,"name": "test abc"}&
] | filter:'s'}}& //查找含有有s的行&
//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]&
{{ [{"age": 20,"id": 10,"name": "iphone"},&
{"age": 12,"id": 11,"name": "sunm xing"},&
{"age": 44,"id": 12,"name": "test abc"}&
] | filter:{'name':'iphone'} }}& //查找name为iphone的行&
//上例结果:[{"age":20,"id":10,"name":"iphone"}]
7，limitTo字符串，对像的截取
{{ "i love tank" | limitTo:6 }}&&&&& //结果：i love&
{{ "i love tank" | limitTo:-4 }}&&&& //结果：tank&
{{ [{"age": 20,"id": 10,"name": "iphone"},&
{"age": 12,"id": 11,"name": "sunm xing"},&
{"age": 44,"id": 12,"name": "test abc"}&
] | limitTo:1 }}&& //结果：[{"age":20,"id":10,"name":"iphone"}]
8，orderBy对像排序
{{ [{"age": 20,"id": 10,"name": "iphone"},&
{"age": 12,"id": 11,"name": "sunm xing"},&
{"age": 44,"id": 12,"name": "test abc"}&
] | orderBy:'id':true }}&&& //根id降序排&
{{ [{"age": 20,"id": 10,"name": "iphone"},&
{"age": 12,"id": 11,"name": "sunm xing"},&
{"age": 44,"id": 12,"name": "test abc"}&
] | orderBy:'id' }}&&&&& //根据id升序排
二，自定filter功能我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。1，filters.js添加一个module
angular.module('tanktest', []).filter('tankreplace', function() {&
&&return function(input) {&
&&&&return input.replace(/tank/, "=====")&
2，app.js中加载这个module
var phonecatApp = angular.module('phonecatApp', [&
&'ngRoute',&
&'phonecatControllers',&
&'facebookControllers',&
&'tanktest'&
3，html中调用
{{ "TANK is GOOD" | lowercase |tankreplace}}& //结果：===== is good
注意：| lowercase |tankreplace管道命令可以有多个
三、filter的两种使用方法　　1. 在模板中使用filter　　我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：
{{ expression | filter }}
　　也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）
{{ expression | filter1 | filter2 | ... }}
　　filter可以接收参数，参数用 : 进行分割，如下：
{{ expression | filter:argument1:argument2:... }}
　　除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：
&span ng-repeat="a in array | filter "&
　　2. 在controller和service中使用filter　　我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：
app.controller('testC',function($scope,currencyFilter){
&&$scope.num = currencyFilter(123534);&
　　在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。
　　此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：
app.controller('testC',function($scope,$filter){
&&$scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date());&
　　可以达到同样的效果。好处是你可以方便使用不同的filter了。
发表评论：
TA的最新馆藏[转]&更多公众号：gh_4a0739dfbeb8主要是web案例的分享，和H5、C3、canvas的学习总结。最新文章相关作者文章搜狗：感谢您阅读AngularJs中filter（过滤器）简单了解，本文由网友投稿产生，如果侵犯了您的相关权益，请联系管理员。angular&学习笔记&-&fliter_ai国者_新浪博客
angular&学习笔记&-&fliter
angular中，Filter是用来格式化数据用的，比如项目中，有很多时候从后台拿来的数据直接显示用书是不明白其含义的，这时候我们需要自己格式化一下后再显示在界面上，传统的j我们需要些一长串代码，各种影射，而angular给我们提供的filter，确实要简介很多。
Filter的基本原型（在视图模板（View Template）中使用方法）：
AngularJS提供了一些常用的Filter，如下currency, date, filter, json, limitTo,
uppercase，&lowercase, number,
orderBy。具体的用法在中
都有详细说明。这里我们简单举一个例子
date filter (日期filter)
{{ 4 | date }}
{{ 4 | date:"MM/dd/yyyy @ h:mma" }}
在controllers，
services和drictives中使用filter：
可以再AngularJS的controller、service或者driective中使用filter，这时候你需要将依赖的filter名字加入到controller​、service或者driective的依赖中去。
$scope.date = $filter("date")($scope.date.date,
'yyyy-mm-dd')​
也可以再controller中直接使用filter，这样controller可以根据自身需要而适时调用filter​。
自定义Filter
如果内建的Filter不能满足你的需求，你当然可以定义一个专属于你自己的Filter。
AngularJS编写自定义过滤器的形式和AngularJS的factory
service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可.
格式大致如：
app.filter('filter(过滤器)名称',function(){
& & &return
function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ &
& & //...执行业务逻辑代码
& & return 处理后的对象;
AngularJS官方文档：&
CodeSchool快速入门视频：&
博客等级：
博客积分：0
博客访问：10,282
关注人气：0
荣誉徽章：}