AngularJS 从入门到精通(一 过滤器 Filter)

过滤器(Filter),故名思议,源数据通过特定的规则,转换成需要的数据格式, 这个规则,我们统称为过滤器。

AngularJs 的Filter 功能非常强大,并且使用方便。它能够使得页面分组,查询,排序,以及数据转换等操作变的异常简单,同时还可以自定义过滤器实现更复杂的功能。


格式:{{expression | filter}} 或 {{expression | filter1 | filter2 | filter3......}} 或者 {{ expression | filter:argument1:argument2:... }}


常用内置Filter :

  • currency: 货币符号格式化,默认是美元符号$,可以自定义人民币符号¥等, 用法如下:
{{100 | currency:'¥'}}
       输出 100¥
  • uppercase/lowercase 字符串大写/小写转换
<span style="font-size: 10px;">{{"Angularjs" | uppercase}}</span>
输出 ANGULARJS
  • data: 日起格式化
{{date | date : 'yyyy-MM-dd hh:mm:ss'}}
  • limitTo 限制数组或字符串长度
{{ array | limitTo : 2 }}
上面例子是输出数组的前两个元素
{{ "Angularjs" | limitTo : 2 }}
输出字符前两位,An
  • number 数字格式化
{{ "123.45678"| number : 2 }}
输出到小数点后两位: 123.45
  • orderBy: 将数组元素按照指定的元素进行排序,同时可以指定按照升序或者降序排序,若不指定,默认为升序排序。
<ui ng-repeat="person in persons | orderBy:name">
	<li>{{person.name}}</li>
        <li>{{person.age}}</li>
</ui>
其中通过修改在参数前加- 可以按降序排列, 如下:
orderBy:'-name'
  • filter
自定义Filter:

filter的自定义方式使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。下面例子是定义一个过滤器,它可以返回一个数组中下标为奇数的元素,代码如下:

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;
    }
});

  格式就是这样,你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数,参数就定义在return的那个函数中,作为第二个参数,或者更多个参数也可以。

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值