就是通过一定的规则对数据进行处理,然后返回处理后的结果。
一、内置过滤器(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}}就可以直接输出 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中