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;

}

入参为简单的字符串数组

$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}]