Angular过滤器

作用

格式化表达式的值

使用

在视图模板中使用过滤器

{{ expression | filter }}

例如，标记使用 过滤器将数字12格式化为货币。得出的值为。

{{ 12 | currency }} currency   $12.00

可以将过滤器应用于另一个过滤器的结果。这称为“链接”，并使用以下语法：

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

过滤器可能有参数。语法是

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

例如，标记使用过滤器将数字1234格式化为2个小数点 。得出的值为。

{{ 1234 | number:2 }}number1,234.00

在控制器，服务中使用过滤器

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

app.controller('testC',function($scope,currencyFilter){
    $scope.num = currencyFilter(123534);  
}

在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？小兄弟莫着急ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：

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

可以达到同样的效果。好处是你可以方便使用不同的filter了

在指令中使用过滤器

除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

<span ng-repeat="a in array | filter ">

自定义过滤器

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。话不多说，我们来写一个看看。比如我需要一个过滤器，它可以返回一个数组中下标为奇数的元素，代码如下：

angular.module('myStatefulFilterApp',[])
.filter('reverse',function () {
    return function (input,uppercase) {
        input = input || '';
        var out = '';
        for (var i = 0 ; i < input.length ; i ++){
            out = input.charAt(i) + out
        }
        if (uppercase){
            out = out.toUpperCase();
        }
        return out
    }
})

.controller('MyCtrl',['$scope','reverseFilter',function ($scope,reverseFilter) {
    $scope.greeting = 'hello'
    $scope.filteredGreeting = reverseFilter($scope.greeting)
}])

<div ng-controller="MyCtrl">
    Input:<input ng-model="greeting" type="text">
    Reverse: {{greeting|reverse}}<br>
    Reverse + uppercase: {{greeting|reverse:true}}<br>
    Reverse, filtered in controller:{{filteredGreeting}}<br>
</div>

Angular 内置过滤器

filter（匹配子串）

用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则

<div  style="margin-top: 30px"  ng-controller="filterCtrl">
    <span>{{childArr | filter:'a'}}</span><br>
    <span>{{childArr | filter : 4 }}</span><br>
    <span>{{childArr | filter : {name : 'i'} }}</span><br>
    <span>{{childArr | filter : func}}</span>
</div>

.controller('filterCtrl',['$scope',function ($scope) {
    $scope.childArr = [
        {name:'kimi',age:3},
        {name:'cindy',age:4},
        {name:'anglar',age:4},
        {name:'shitou',age:6},
        {name:'tiantian',age:5}
    ];
    $scope.func = function (e) {
        return e.age > 4
    }
}])

currency （货币处理）

使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：

{{num | currency : '￥'}}

number（小数处理）

如果输入为null或未定义，则将仅返回它。如果输入是无限的（无穷大或-无穷大），则分别返回无穷大符号’∞’或’-∞’。如果输入的不是数字，则返回一个空字符串

In HTML Template Binding
{{ number_expression | number : fractionSize}}

In JavaScript
$filter('number')(number, fractionSize)

参数：number、fractionSize（小数位数，默认为3）；两个参数都可以为number和string类型

<script>
  angular.module('numberFilterExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.val = 1234.56789;
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter number: <input ng-model='val'></label><br>
  Default formatting: <span id='number-default'>{{val | number}}</span><br>
  No fractions: <span>{{val | number:0}}</span><br>
  Negative number: <span>{{-val | number:4}}</span>
</div>

date（日期处理）

这个格式比较多，放上官方文档链接

格式

{{ date_expression | date : format : timezone}}

$filter('date')(date, format, timezone)

例子

<div>
    <span ng-non-bindable>{{1288323623006 | date:'medium'}}</span>:
    <span>{{1288323623006 | date:'medium'}}</span><br>
    <span ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>:
    <span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>
    <span ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</span>:
    <span>{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}</span><br>
    <span ng-non-bindable>{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}</span>:
    <span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span><br>
</div>

json（格式化json对象）

json过滤器可以把一个js对象格式化为json字符串，没有参数。这东西有什么用呢，我一般也不会在页面上输出一个json串啊，官网说它可以用来进行调试，嗯，是个不错的选择。或者，也可以用在js中使用，作用就和我们熟悉的JSON.stringify()一样。用法超级简单：

{{ jsonTest | json}}

limitTo（限制数组长度或字符串长度）

limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

lowercase （小写）

{{ lowercase_expression | lowercase}}

$filter('lowercase')()

uppercase（大写）

{{ uppercase_expression | uppercase}}

$filter('uppercase')()

orderBy（排序）

orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

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