angular学习之——过滤器Filter

就是通过一定的规则对数据进行处理，然后返回处理后的结果。

一、内置过滤器（9种）

currency(货币)
将数字格式化为货币，默认美元符，可传入所需的符号{{num | currency : '￥'}}

date(日期)
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}注意大小写，可自由组合

filter(子串匹配)
$scope.childrenArray = [ {name:'lili',age:3}, {name:'anan',age:6}, {name:'feifei',age:5} ]; $scope.func = function(val){return val.age>4;} {{ childrenArray | filter : 'a' }} //匹配属性值中含有a的 {{ childrenArray | filter : {name : 'n'} }} //参数是对象，匹配name属性中含有n的 {{childrenArray | filter : func }} //参数是函数，指定返回age>4的

json(格式化json对象)
用来进行调试 {{ jsonData | json}}
可以用在js中使用，作用同JSON.stringify()

limitTo(限制个数)
截取数组或字符串，接收一个参数用来指定截取的长度。{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项

lowercase(小写)
uppercase(大写)
number(数字)
为一个数字加上千位分割（123,456,789）
{{ num | number : 2 }} //参数，指定float类型保留几位小数

orderBy(排序)
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序

二、使用

1、在html中使用

{{ expression | filter1 | filter2 | ... }} 在{{}}中 类似于管道
<span ng-repeat="a in array | filter "> 在指令中

2、在controller和service中使用

(1)引入单个过滤器（例如currency过滤器）
利用依赖注入
app.controller('testWy',function($scope,currencyFilter){ $scope.num = currencyFilter(123534); }
在模板中使用{{num}}就可以直接输出 $123,534.00
(2)引入多个过滤器（$filter）
app.controller('testWy',function($scope,$filter){ $scope.num = $filter('currency')(123534); 　　$scope.date = $filter('date')(new Date()); }

三、自定义过滤器

app.filter('filterName',function(){ //定义过滤器 return function(inputArray){ //接收参数 var array = []; for(var i=0;i<inputArray.length;i++){ if(i%2!==0){ array.push(inputArray[i]); } } return array; //返回处理后的数据 } });

return function (input, index, val) //js中
Result: {{ yourinput | filterFunc:3:'b' }} //html中