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

你可能感兴趣的:(Angular JS 中的内置方法之filter)