angularJS中filter(过滤器)的使用

filter时angular开发经常接触的一个内容，今天在wiki中做一个补全，说一下filter的使用

首先，filter分为angularJS中封装好的filter和自定义filter

自定义的filter包括以下：

1.currency(货币处理)，默认是美元符号

{{num | currency : '￥'}}

2.date(日期格式化)

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

参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们

filter(匹配子串) {{ childrenArray | filter : 4 }} //匹配属性值中含有4的

4.json(格式化Json对象)

{{ jsonTest | json}}

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

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

lowercase(小写) {{name | lowercase}}

7.uppercase(大写)

{{name | uppercase}}

8.number(格式化数字)

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

苦于在js里频繁使用toFixed()的同事得救了
9.orderBy(排序)

{{ childrenArray | orderBy : 'age' }}//按age属性值进行排序

封装好的几种中，主要排序，限制长度和日期格式化以及保留小数位比较有用，其余在遇到特定需求的时候，我们可能要自定义过滤器

filter的使用

过滤器在Html中的使用就是标准的表达式后面+ | +filter的名字

比如{{ name | filter}}使用一个filter

或者{{name | filter1 | filter2 | filter3 }}使用多个filter，前一个filter的输出是下一个filter的输入

再或者{{ expression | filter:argument1:argument2:... }} argument1，argument2到argumentN都是filter的参数，这种是为filter传参数

自定义filter

首先要说明，filter是不需要注入到controller中的，就像function一样，可以全局使用

然后用一个例子来说明自定义filter

自定义两个filter如下：

angular.module('starter').filter('dealer',function(){ //将对象数组中每一项的name变为john加编号，编号为从0到数组长度减1，然后将处理后的数组返回
return function(inputArray){
for(var i=0;i<inputArray.length;i++){
inputArray[i].name="John"+i;
}
return inputArray;
}
});
angular.module('starter').filter('littledealer',function(){//将改参数截取到只保留前两位并返回
return function(param){
var a = param.substring(0,2);
return a;
}
});

在controller中，有数组如下:

$scope.items=[
{
name:"sss",
age:"123"
},
{
name:"sdd",
age:"131"
},
{
name:"acs",
age:"143"
},
{
name:"scx",
age:"135"
},
{
name:"768",
age:"asd"
}
];

在html中，我们把数组循环显示出每项的name字段和age字段，然后用filter过滤一下，html中代码如下：

<ion-view view-title="Dashboard">
<ion-content class="padding">
<div style="width: 100%;height: 40px;text-align: center;background-color: transparent;margin-top: 20px;"
ng-repeat="x in items |    dealer">
<label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.name}}</label><br>
<label style="margin-left: auto;margin-right: auto;font-size: 0.875rem;color: #4547a8;">{{x.age | littledealer}}</label><br>
</div>
</ion-content>
</ion-view>

由于我们将数组中的每个名字都变为john+编号，且其中每项的年龄字段被截取保留了前位，现在结果为：

                                                                

过滤器在项目开发中会大量用到，良好的filter使用习惯可以提高开发效率