[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(排序)

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

二、使用

1、在html中使用

{{ expression | filter1 | filter2 | ... }} 在{{}}中 类似于管道
在指令中

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

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

你可能感兴趣的:([angular] - 过滤器Filter)