filter angularjs
angular 有自己现有的filter ，也可以自定义filter；filter是用来格式化数据用的；
Filter可以被链式使用（即连续使用多个filter）：
{{ expression | filter1 | filter2 | ... }}
Filter也可以指定多个参数：
{{ expression | filter:argument1:argument2:... }}
内置的一些filter：
currency 货币：{{12 | currency}}默认是$；
currency 货币：{{12 | currency：‘￥’}}；
{{ 12.45 | currency:'CHY￥':1}} <!--将12.45格式化为货币，使用自定义单位符号为 'CHY￥', 小数指定1位, 会执行四舍五入操作 -->
{{ 12.55 | currency:undefined:0}} <!--将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入 -->
datefilter：
方法原型：
function(date, format, timezone)
用法：
<!--使用ISO标准日期格式 -->
{{ '2015-05-20T03:56:16.887Z' | date:"MM/dd/yyyy @ h:mma"}}
<!--使用13位（单位：毫秒）时间戳 -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}
<!--指定timezone为UTC -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}
jsonFilter（json）：
方法原型：
function(object, spacing)
用法（将对象格式化成标准的JSON格式）：
{{ {name:'Jack', age: 21} | json}}
4，number格式化
|
1
2
|
{{ 1.234567 | number:1 }} //结果：1.2{{ 1234567 | number }} //结果：1,234,567 |
1，uppercase，lowercase大小转换
|
1
2
|
{{ "lower cap string" | uppercase }} //结果：LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} //结果：tank is good |
{{ [{"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的行 filter查找//上例结果:[{"age":20,"id":10,"name":"iphone"}]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"}]{{ [{"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
|
1
2
3
4
5
|
angular.module('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "=====") }; }); |
2，app.js中加载这个module
|
1
2
3
4
5
6
|
var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatControllers', 'facebookControllers', 'tanktest']); |
3，html中调用
|
1
|
{{ "TANK is GOOD" | lowercase |tankreplace}} //结果：===== is good |
注意：| lowercase |tankreplace管道命令可以有多个
三、filter的两种使用方法
1. 在模板中使用filter
我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：
|
1
|
{{ expression | filter }} |
也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）
|
1
|
{{ expression | filter1 | filter2 | ... }} |
filter可以接收参数，参数用 : 进行分割，如下：
|
1
|
{{ expression | filter:argument1:argument2:... }} |
除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：
|
1
|
<span ng-repeat="a in array | filter "> |
2. 在controller和service中使用filter
我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：
|
1
2
3
|
app.controller('testC',function($scope,currencyFilter){ $scope.num = currencyFilter(123534); } |
在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。
此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：
|
1
2
3
4
|
app.controller('testC',function($scope,$filter){ $scope.num = $filter('currency')(123534); $scope.date = $filter('date')(new Date()); } |
可以达到同样的效果。好处是你可以方便使用不同的filter了。
