1.ng内置了一些过滤器,它们是:
currency(货币)、{{num | currency : '¥'}}
date(日期)、{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
filter(子串匹配)、
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的
json(格式化json对象)、
json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它可以用来进行调试,嗯,是个不错的选择。
{{ jsonTest | json}}
limitTo(限制个数)、
lowercase(小写)、
uppercase(大写)、
number(数字)、
orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,
2.除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。
比如我需要一个过滤器,它可以返回一个数组中下标为奇数的元素,代码如下:
3.filter的两种使用方法
(1). 在模板中使用filter
我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
{{ expression | filter }}
我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:
我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入
currency(货币)、{{num | currency : '¥'}}
date(日期)、{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
filter(子串匹配)、
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的
json(格式化json对象)、
json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它可以用来进行调试,嗯,是个不错的选择。
{{ jsonTest | json}}
limitTo(限制个数)、
lowercase(小写)、
uppercase(大写)、
number(数字)、
orderBy(排序)
orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序
<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序
总共九种。
2.除此之外还可以自定义过滤器,这个就强大了,可以满足任何要求的数据处理。
比如我需要一个过滤器,它可以返回一个数组中下标为奇数的元素,代码如下:
app.filter('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<inputArray.length;i++){
if(i%2!==0){
array.push(inputArray[i]);
}
}
return array;
}
});
3.filter的两种使用方法
(1). 在模板中使用filter
我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:
{{ expression | filter }}
我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:
<span ng-repeat="a in array | filter ">
(2). 在controller和service中使用filter我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}