angularjs过滤器的学习

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过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,
<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);  
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值