AngularJS中的过滤器是用于对数据的格式化，或者筛选的函数，可以直接通过以下语法使用：
{{expression|filter}}
{{expression|filter1|filter2}}
{{expression|filter1:param1,param2,...|filter2}
过滤器的种类有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<!DOCTYPE html>
<
html
ng-app
=
"app"
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
>
<
p
>{{1234567890 | number}}</
p
>
<!--显示1,234,567,890-->
<
p
>{{1234.56789 | number:3}}</
p
>
<!--显示1,234.568，保留3位小数-->
<
p
>{{1234.56789 | currency}}</
p
>
<!--显示$1,234.57，货币，默认的前缀是美元符号-->
<
p
>{{1234.56789 | currency:'￥'}}</
p
>
<!--显示￥1,234.57-->
<
p
>{{today | date:'medium'}}</
p
>
<!--显示Jun 28, 2015 3:45:54 PM-->
<
p
>{{today | date:'short'}}</
p
>
<!--显示6/28/15 3:45 PM-->
<
p
>{{today | date:'fullDate'}}</
p
>
<!--显示Sunday, June 28, 2015-->
<
p
>{{today | date:'longDate'}}</
p
>
<!--显示June 28, 2015-->
<
p
>{{today | date:'shortDate'}}</
p
>
<!--显示6/28/15-->
<
p
>{{today | date:'shortTime'}}</
p
>
<!--显示3:45 PM-->
<
p
>{{today | date:'mediumTime'}}</
p
>
<!--显示3:45:54 PM-->
<
p
>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</
p
>
<!--显示2015-06-28 15:45:54-->
<
p
>{{['a','b','c','d','e'] | limitTo:3}}</
p
>
<!--显示["a","b","c"]，截取前3位-->
<
p
>{{['a','b','c','d','e'] | limitTo:-3}}</
p
>
<!--显示["c","d","e"]，截取后3位-->
<
p
>{{'Hello World' | lowercase}}</
p
>
<!--显示hello world-->
<
p
>{{'Hello World' | uppercase}}</
p
>
<!--显示HELLO WORLD-->
<
p
>{{data.phone | filter:'le'}}</
p
>
<!--显示[{"name":"iPhone","company":"Apple"}]，只匹配value值-->
<
p
>{{data.phone | filter:{company:'A'} }}</
p
>
<!--显示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI P8","company":"HUAWEI"}]，company中有A就会匹配到-->
<
p
>{{data.phone | orderBy:'name'}}</
p
>
<!--显示[{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，默认是从小到大排序-->
<
p
>{{data.phone | orderBy:-'name'}}</
p
>
<!--显示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"}]，反序-->
<
p
>{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}</
p
>
<!--自定义的过滤器，显示[2,3,8,9,10]，定义见90~95行-->
</
div
>
<
script
src
=
"../JS/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', [])
.controller('Controller1', function($scope, $filter) {
$scope.today = new Date;
$scope.data = {
phone: [{
name: 'iPhone',
company: 'Apple'
}, {
name: 'Galaxy S5',
company: 'Sumsung'
}, {
name: 'HUAWEI P8',
company: 'HUAWEI'
}]
};
var jsonString = $filter('json')($scope.data);
console.log(jsonString);
/* console输出json格式的data
{
"phone": [
{
"name": "iPhone",
"company": "Apple"
},
{
"name": "Galaxy S5",
"company": "Sumsung"
},
{
"name": "HUAWEI P8",
"company": "HUAWEI"
}
]
}
*/
//自定义过滤器
$scope.checkNum = function(num) {
//>10的不保留
if (num > 10) return false;
else return true;
}
});
</
script
>
</
body
>
</
html
>
|
除了上面自定义过滤器的方法外，还有两种专门的方法。
第一种 module.filter(name,filterFactory)
第二种 @$filterProvider.register();
第一种的例子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<
html
ng-app
=
"app"
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
>
<
ul
>
<!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 -->
<
li
ng-repeat
=
"item in data | filterAge"
>
`item`.`name` `item`.`age` `item`.`position`
</
li
>
</
ul
>
</
div
>
<
script
src
=
"../JS/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', [], function($provide) {
//service提供数据
$provide.service('data', function() {
return [{
name: 'Wilshere',
age: 23,
position: 'midfield'
}, {
name: 'Giroud',
age: 28,
position: 'striker'
}, {
name: 'Cech',
age: 33,
position: 'goalkeeper'
}];
});
})
//用.filter的方法定义过滤器
.filter('filterAge', function() {
return function(obj) {
//obj是过滤前的对象
var newObj = [];
angular.forEach(obj, function(i) {
if (i.age > 25) {
newObj.push(i);
}
});
return newObj;
}
})
.controller('Controller1', function($scope, data) {
$scope.data = data;
});
</
script
>
</
body
>
</
html
>
|
第二种的例子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html>
<
html
ng-app
=
"app"
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
ng-app
=
"app"
>
<
div
ng-controller
=
"Controller1"
>
<
ul
>
<!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 -->
<
li
ng-repeat
=
"item in data | filterAge"
>
`item`.`name` `item`.`age` `item`.`position`
</
li
>
</
ul
>
</
div
>
<
script
src
=
"../JS/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', [], function($filterProvider, $provide) {
//用注册的方法自定义过滤器
$filterProvider.register('filterAge', function() {
return function(obj) {
var newObj = [];
angular.forEach(obj, function(i) {
//age大于25的才会输出
if (i.age > 25) {
newObj.push(i);
}
});
return newObj;
}
});
//service提供数据
$provide.service('data', function() {
return [{
name: 'Wilshere',
age: 23,
position: 'midfield'
}, {
name: 'Giroud',
age: 28,
position: 'striker'
}, {
name: 'Cech',
age: 33,
position: 'goalkeeper'
}];
});
})
.controller('Controller1', function($scope, data) {
$scope.data = data;
});
</
script
>
</
body
>
</
html
>
|
本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1668754，如需转载请自行联系原作者
