angularJS-过滤器

过滤器(filter),作用就是接收一个输入,按照某个规则进行处理,然后返回处理后的结果。通过一个管道字符(|)添加到表达式和指令中。我更倾向于把它称之为“转换器”。主要用在数据的格式化上。

一、两种使用方法:

1、在模板中使用filter

(1)我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

{{ expression | filter }}

(2)也可以多个filter连用,上一个filter的输出将作为下一个filter的输入:

{{ expression | filter1 | filter2 | ... }}

(3)filter可以接收参数,参数用 : 进行分割,如下:

{{ expression | filter:argument1:argument2:... }}

(4)在指令中使用filter

<li ng-repeat="x in names | filter">
    {{ x.name  }}
 </li>

2、在controller和service中使用filter

我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可:

app.controller('myController', function($scope, currencyFilter){
    $scope.num = currencyFilter(12345);  // $12,345.00
}

那么问题来了:如果我要在controller中使用多个filter,难道要一个一个注入吗?

当然不用,ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了:

app.controller('myController', function($scope, $filter){
   $scope.num = $filter('currency')(12345);
  $scope.date = $filter('date')(new Date());
}

二、ng的内置过滤器

1、currencyFilter(currency):

用途:格式化货币

方法原型:

function(amount, currencySymbol, fractionSize)

用法:

<!--将12格式化为货币,默认单位符号为 '$', 小数默认2位-->
{{ 12 | currency}}  
<!--将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位-->
{{ 12.45 | currency:'¥'}} 
<!--将12.45格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定1位, 会执行四舍五入操作 -->
{{ 12.45 | currency:'CHY¥':1}} 
 <!--将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 -->
{{ 12.55 | currency:undefined:0}}

2、dateFilter(date):

用途:格式化日期

方法原型:

function(date, format, timezone)

用法:

{{ 1304375948024 | date }}                          //结果:May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}     //结果:05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}    //结果:2011-05-03 06:39:08 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma":"UTC"}}//结果:指定timezone为UTC 

3、filterFilter(filter):

用途:过滤数组

方法原型:

function(array, expression, comparator)

{{ Array | filter : 'a' }} //匹配属性值中含有a的
{{ Array | filter : 4 }}  //匹配属性值中含有4的
{{ Array | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{ Array | filter : func }}  //参数是函数,指定返回age>4的

4、jsonFilter(json):

方法原型:

function(object, spacing)

用途:格式化json对象

{{ {foo: "bar", baz: 23} | json }}  //结果:{ "foo": "bar", "baz": 23 } 

5、limitToFilter(limitTo):

方法原型:

function(input, limit)

用途:限制数组长度或字符串长度

1 <div ng-init="myArr = [{name:'Tom', age:20}, {name:'Tom Senior', age:50}, {name:'May', age:21}, {name:'Jack', age:20}, {name:'Alice', age:22}]">
2     <div ng-repeat="u in myArr | limitTo:2">
3         <p>Name:{{u.name}}
4         <p>Age:{{u.age}}
5     </div>
6 </div>

6、lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

方法原型:

function(string)

 用途:转换为小写/大写

{{ "lower cap string" | uppercase }} //结果:LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果:tank is good

7、 number(格式化数字)

用法:可接收一个参数,可以指定小float类型保留几位小数:

{{ 1234567 | number }}     // 结果:1,234,567 
{{ 1.234567 | number:2 }}  // 结果:1.23

8、orderBy(排序)

orderBy过滤器可以将一个数组中的元素进行排序。

接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。

可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)

<div>{{ Array | orderBy : 'age' }}</div>      <!--按age属性值进行排序-->
<div>{{ Array | orderBy : orderFunc }}</div>   <!--按照函数的返回值进行排序-->
<div>{{ Array | orderBy : ['age','name'] }}</div>  <!--如果age相同,按照name进行排序-->

三、自定义过滤器

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;
    }
});
原文地址:https://www.cnblogs.com/fydxx/p/6633331.html