Angular JS 中的内置方法之filter

通过过滤器可以实现很多数据格式化的功能

常用方法形如{{ data | uppercase}} 或者是{{ 123.456 | number:2 }}

也可以通过在控制器中注入$filter来实现功能

angular.module('MyApp',[])
.controller('FilterController',function($scope,$filter){
    $scope.data = $filter('uppercase')('ard');
});

1.currency 货币单位

{{ 123456.789 | currency }}  　　　　　　$123,456.79 

{{ 123456.789 | currency:'￥' }}　　   　　￥123,456.79 

{{ 123456.789 | currency:'￥':2 }}　　　　￥123,456.79

{{ 123456.789 | currency:'￥':0 }}　　　　￥123,457

 

2.date 日期格式化

2.1.日期的格式化

{{ today | date}}    　　　　　　　　　　May 3, 2018 

{{ today | date:'medium' }} 　　　　　　 May 3, 2018 10:05:21 PM 

{{ today | date:'short' }}　　　　　　　　5/3/18 10:05 PM 

{{ today | date:'fullDate' }}　　　　　　   Thursday, May 3, 2018

{{ today | date:'longDate' }}　　　　　　 May 3, 2018

{{ today | date:'mediumDate'}}　　　　   May 3, 2018

{{ today | date:'shortDate'}}　　　　　　 5/3/18

{{ today | date:'mediumTime'}}　　　　   10:05:21 PM 

{{ today | date:'shortTime'}}　　　　　　 10:05 PM 

 

2.2.年份的格式化

{{ today | date:'yyyy'}}　　　　　　 2018　　　　　　 

{{ today | date:'y'}}　　　　   　　　2018

{{ today | date:'yy'}}　　　　　　     18

2.3.月份格式化

{{ today | date:'MMMM'}}　　　　　　 August　　　　　　 

{{ today | date:'MMM'}}　　　　   　　 Aug

{{ today | date:'MM'}}　　　　　　　　08

{{ today | date:'M'}}　　　　     　　　  8

2.4.日期格式化

{{ today | date:'EEEE'}}　　　　　　  Thursday　　　　　 

{{ today | date:'EEE'}}　　　　   　　 Thu

{{ today | date:'dd'}}　　　　　　　　08

{{ today | date:'d'}}　　　　     　　　 8

2.5.小时格式化

{{ today | date:'HH' }} 　　　　    　　24小时制数字小时：
{{ today | date:'H' }} 　　　　　　　　一天中的第几个小时：
{{ today | date:'hh' }} 　　　　　　　 12小时制数字小时：
{{ today | date:'h' }} 　　　　　　　　上午或下午的第几个小时：

2.6.分钟格式化

{{ today | date:'mm' }} 　　　　　　    09
{{ today | date:'m' }} 　　　　　　　　9

2.7.秒数格式化

{{ today | date:'ss' }} 　　　　　　　　02
{{ today | date:'s' }} 　　　　　　　　  2
{{ today | date:'.sss' }} 　　　　　　　 .995

2.8.字符格式化

{{ today | date:'a' }} 　　　　　　　　  AM
{{ today | date:'Z' }} 　　　　　　　　  0800 　　时区标识

2.8.自定义的组合格式化

{{ today | date:'MMMd, y' }} 　　　　　Aug9, 2013
{{ today | date:'EEEE, d, M' }} 　　　　Thursday, 9, 8
{{ today | date:'hh:mm:ss.sss' }} 　　　12:09:02.995

3.从数组中筛选符合条件的结果

3.1.数组中对象为简单对象（纯数字或字符串）

3.1.1.过滤条件为简单字符串 {{ data | filter:'abc' }}

只要存在filter中过滤条件的字符串都能被返回

$scope.data = ['abc','abcde','hahaha'] 　　

输出的结果为 ['abc','abcde'] 　　

如果想要排除某种字符串 则使用 {{ data | filter:'!abc'}}

3.2.数组中对象为复杂对象

3.2.1.过滤条件为简单字符串 {{ data | filter:'abc' }}

只有某个对象的的键值对中的值符合条件才会被输出。

$scope.data= [{"name":"alex","age":16},{"name":"keji","age":16},{"age":22,"gender":"man"}];

3.2.2.过滤条件为对象 {{ data | filter:{'name':'alex'} }} 

只有对象中包含该键，且键的值等于过滤条件的才会被输出。

$scope.data = [{'name':'alex','age':'18'},{'name':'peter','age':'19'},{'name':'keke','gender':'woman'}];       输出结果为[{"name":"alex","age":"18"}]

如果不需要指定data中是哪个键的属性中包含指定的属性，那么可以用

{{ data | filter:{'$':'alex'} }} 这种写法，此时就是类似将对象转为字符串，如果值中包含指定的字符串，则输出该对象，类似与上面直接用一个字符串作为条件来过滤。

3.3.自定义函数实现过滤逻辑校验

3.3.1.{{ data | filter:isCapitalized }}  

通过自定义函数isCapitalized 中需要过滤的数据进行逐个筛选，如果满足条件，函数返回true

var app = angular.module('myApp',[]);
app.controller('MyCtrl',function($scope){
    $scope.data = [{'name':'alex','age':'18'},{'name':'peter','age':'19'},{'name':'keke','gender':'woman'}];
    $scope.dataTwo = ['Alex','peter','json']; 
    $scope.isCapitalized = function(obj){
        return obj.name == 'alex';
    }
});

3.3.2.自定义filter(可以看作上面自定义函数的另一种写法)

var app = angular.module('myApp',[]);
app.filter('myReverse',function(){
    return function(text){
        return text.split("").reverse().join("");
    }
})

3.4.使用filter时候的第二个参数

3.4.1.TRUE　　{{ data | filter:'xxx':true}}

此时的过滤条件为全等，只有data中的数据与过滤条件完全一致（大小写，类型等），才能被输出。

3.4.2.FALSE　　{{ data | filter:'xxx':false}}

此时的过滤条件为非全等，只有data中的数据与过滤条件字面值一致（忽略大小写，类型等），就能被输出。

3.4.3.JSON　　{{ data | filter:'xxx':json}}

此时会将结果以json的格式输出

3.5.limitTo {{ data | limitTo:n }}

n为正值，从前往后截取。n为负值，从后往前截取。

若data为简单对象，返回的也是同种类型对象。

若data为对象数组，返回的也是数组。

若n大于data的长度，返回整个对象。

3.6.uppercase {{ data | uppercase }}

将字符串转为大写

3.7.lowercase {{ data | lowercase }}

将字符串转为小写

3.8.number {{ data | number:x}}

将数字添加千分符，默认x=3，即保留小数点后三位，进行四舍五入。

{{ 1234567.78935 | number:4 }}　　 输出  1,234,567.7894

3.9. orderBy {{ data | orderBy:fun:true}} （fun为必填，第二个参数默认false）

3.9.1.fun为函数

此时需要自定义一个函数来实现入参的处理

若定义函数为

$scope.sortSimpleType(op){

     return op;

}

 

入参为简单的字符串数组 

{{ data | orderBy:sortSimpleType }}

 

$scope.data = " ['test','bob','market','type','barrow'] "

 

输出为 

 

["barrow","bob","market","test","type"]

 

若$scope.data = "[1,3434,2,1,12121,6,56,3] "

 

输出为

 

[1,1,2,3,6,56,3434,12121]

 

若入参为对象组成的数组，则只需要在自定义函数中返回元素的属性

$scope.sortObjectType = function(obj){

   return obj['name']

}

 

{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: sortObjectType}}

 

结果为

 

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]

3.9.2.fun为字符

如果是字符串，假如待排序的数组为对象，那么将会按照待排序数组中的每个对象的对应属性值，进行排序。如果字符串前边加有“+”，“-”符号，那么+表示升序排序，-表示降序排序。如果字符串为空，那么将按照元素自身进行排序。

对于元素是对象的数组按照某一个属性来排序，此时只需要指定字符为属性名就行，相比于上面需要自定义一个函数更便捷。

{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}

输出结果

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].

3.9.3.fun为数组

如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序，如果a属性值相同，那么将按照b属性值进行排序。

 {{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}

输出结果

[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]