说说AngularJS中的filter
发布在AngularJS小技巧2015年8月7日view:39325Angularjs
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

说说AngularJS中的filter

如果你熟悉AngularJS的话,一定记得其中有一个叫做filter,过滤器的东西。说的简单通俗一点,顾名思义,过滤器就是用来过滤变量值的东西,当然,这里的过滤可以是删除也可以是添加,具体我们会在后面一一讲解。

AngularJS本身为我们提供了不少内建的过滤器,比如说:currency – 用来将变量转换成货币表现形式,例如:

<div>{{ amount | currency}}</div>   

如果此时$scope.amount = 1234.56,那么经过currency过滤的amount就会变为$1,234.56。值得一提的是,过滤器是可以添加参数的,具体添加参数的方式是:

:arg1:arg2  

也就是说,每添加一个参数,就在相应过滤器后面加上一个冒号,然后在冒号后面加上参数。拿上面的currency举例,我们可以为它添加标示符参数,例如:

 <div>{{ amount | currency:"USD$"}}</div>  

假设$scope.amount此时还是1234.56,那么经过currency过滤器的amount变为USD$1,234.56。

AngularJS中为我们提供了一共9个内建的过滤器,分别是currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase。具体的用法在AngularJS的文档中都有详细说明。但是在具体使用中,我们常常会发现这些过滤器可能不能满足我们比较复杂的要求,这个时候就需要我们来编写自定义过滤器。

编写AngularJS自定义过滤器其实非常简单。如果你写过AngularJS的factory service,一定记得它返回一个对象或者是一个函数,编写自定义过滤器的形式和它非常相像,你在编写的时候,只需要一个带有一个以上参数的函数即可。它的大致形式是这样的:

app.filter('过滤器名称',function(){
    return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
        //...做一些事情  
        return 处理后的对象;
    }
});     

实在是太简单了对吧。如果还是有点迷惑,我们下面来举几个例子。

例子1 编写过滤器在字符串后面加上感叹号

app.filter('filter1',function(){
    return function(item){
        return item + '!';
    }
});  

实在太简单了,一学就会!item是我们需要处理的那个字符串,所以我们将item的后面加上了一个感叹号然后返回。因此 {{ ‘aaa’ | filter1 }}就会变成’aaa!’。

例子2 编写过滤器,根据参数在字符串后面加上相应个数的感叹号

app.filter('filter2',function(){
    return function(item,num){
        for(var i = 0;i < num;i++){
            item = item + '!';
        }
        return item;
    }
});

太简单了,地球人都知道!

例子3 用过滤器处理一个数组,在数组的每一项后面都加上感叹号

在使用ng-repeat等指令的时候,我们经常需要使用过滤器来对其中的一些项目进行过滤,这里值得注意的一点是,在针对数组进行过滤的时候,返回函数的第一个参数是全部数组,同时最后函数也要返回全部数组。比如:

app.filter('filter3',function(){
    return function(items){
        angular.forEach(items,function(item){
            item = item + '!'
        });
        return items;
    }
});  

如果我们在HTML中这样使用:

<ul>
    <li ng-repeat='item in items | filter3'> {{item}} </li>
</ul>

而$scope.items = [’a’,’b’,’c’],那么最终的结果是:

<ul>
    <li>a!</li>
    <li>b!</li>
    <li>c!</li>
</ul>  

非常简单对吧!

除了上面提到的意外,我们还可以通过将$filter注入控制器中,以便我们可以在控制器中使用AngularJS内建的或者我们自定义的过滤器,具体的使用方法为:

app.controller('myCtrl',function($scope,$filter){
    ...

    $filter('过滤器名称')(需要过滤的对象,参数1,参数2,...); 

    ...
});  

比如我们就可以这样使用:

$filter('currency')($scope.amount,'$USD');  

过滤器看起来简单,但是在显示的AngularJS应用开发中确实不可或缺的一个东西。为了让我们更加顺手的开发AngularJS应用,少年们认真学好过滤器吧!


如果你觉得本文对你有帮助,请为我提供赞助 https://me.alipay.com/jabez128

评论
发表评论
2年前

哈哈,

2年前
添加了一枚【评注】:1123
2年前
添加了一枚【评注】:标注一下
2年前
添加了一枚【评注】:123
2年前

angular.forEach(items,function(item){ item = item + '!' }); return items;

返回的items 还是为 [”a”,”b”,”c”]吧。filter后的结果还是

  • a
  • b
  • c
  • 3年前

    例子2的num不能够取到吧,应该要计算。

    WRITTEN BY
    张小俊128
    Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
    TA的新浪微博
    PUBLISHED IN
    AngularJS小技巧

    介绍一些Angular开发中的小技巧

    我的收藏