angular--filter的使用

一、在模板中使用
1.內置方法

/*currency:格式化數字爲貨幣格式，默認爲‘$’，保留2位小數*/
//用法
{{ num | currency}}
{{ num | currency:'￥',1}}

/*number:數字格式化，默認爲添加千位符號（1,000）*/
{{ num | number}}
{{ num | number:2}}  //保留2位小數

/*date:日期格式化，默認格式mediumDate（Sep 25,2019）*/
{{ num | date}}
{{ num | date:'yyyy-MM-dd HH:mm:ss'}}  //一般用法，date有很多內置格式

如想詳細瞭解，請前往https://blog.csdn.net/u013185395/article/details/80449858

/*filter:查找給定數據中擁有當前值的數據*/
{{  [{"age": 20,"id": 20,"name": "iphone"},
        {"age": 22,"id": 21,"name": "sunm xing"},
        {"age": 44,"id": 22,"name": "test abc"}]
         | filter:'1'}}
         //輸出 {"age": 22,"id": 21,"name": "sunm xing"}
         
 {{  [{"age": 20,"id": 20,"name": "a"},
        {"age": 22,"id": 21,"name": "b"},
        {"age": 44,"id": 22,"name": "c"}]
         | filter:{'name':'a'}}}
         //輸出 {"age": 20,"id": 20,"name": "a"}
         
//filter也支持根據多值查找         
 {{  [{"age": 20,"id": 20,"name": "a"},
        {"age": 22,"id": 21,"name": "b"},
        {"age": 44,"id": 22,"name": "c"}]
         | filter:{'age':'2','name':'a'}}}
         //輸出 {"age": 20,"id": 20,"name": "a"}

/*limitTo:截取*/
{{ str | limitTo:3}}//返回前3個字符
{{ arr | limitTo:-1}}//返回數組最後一個元素

/*orderBy：排序(默認爲升序，加參數true則爲降序)*/
{{ [{"age": 20},{"age": 12}, {"age": 44}] 
        | orderBy:'id':true }}  
        //輸出 [{"age": 44},{"age": 20}, {"age": 12}]
        
{{ [{"age": 20},{"age": 12}, {"age": 44}] 
        | orderBy:'id'}}  
        //輸出 [{"age": 12},{"age": 20}, {"age": 44}]

/*使用多個filter*/
{{ num | filterName1 | filterName2}}

2.自定義filter

angular.module('app').filter('myFilter', function () {
    return function (value) {
    	/*處理*/
       return value;
    }
});

二，在controller和service中使用
1.注入

app.controller('myController',['$scope','myFilter',function($scope,myFilter){
    $scope.num = myFilter(123456);  
    //在模板中使用{{num}}就可以直接輸出 $123,456.00了
}])

2.需要注入多個filter時，應該使用內置的filter服務，用法如下：

app.controller('myController',['$scope','$filter',function($scope,$filter){
	//$filter(filter名稱)(需要過濾的內容，參數1，參數2...)
   	$scope.num = $filter('currency')(123534);//等同於$filter('currency')(123534,'$',2)
    $scope.date= $filter('date')(new Date(), 'yyyy-MM-dd');//將日期格式化
    $scope.data = $filter('orderBy')(data,'id',true);//將data裏的數據根據id字段降序排列
}])