AngularJS过滤器

AngularJS过滤器

在{{ }}内通过|来调用filter,例如:

1
2
3
{% raw %}
{{2015 | number:2 }}
{% endraw %}

内置filter

  • number

    以数字格式输出，第二个为可选参数，表示小数点后保留的位数。 包含非数字字符时使用使用可选参数会出现Syntax Error，不使用则输出空字符。

1
2
3
4
5
6
{% raw %}
{{ 1234.12 | number:3}}
{% endraw %} <!-- 1234.12 -->
{% raw %}
{{ 1234.12 | number}}
{% endraw %}  <!-- 1,234.12 -->
  • currency

    以货币格式输出，包括非数字字符时出现Syntax Error。

1
2
3
{% raw %}
{{1234.12 | currency }}
{% endraw %} <!-- $1,234.12 -->
  • lowercase/uppercase

    将字符转小写/大写

1
2
3
4
5
6
{% raw %}
{{"Kavlez! 2015;" | lowercase }}
{% endraw %}  <!-- kavlez! 2015; -->
{% raw %}
{{"Kavlez! 2015;" | uppercase }}
{% endraw %}  <!-- KAVLEZ! 2015; -->
  • json

    将对象转为json字符串

例如已有声明如下:

1
2
3
$scope.person = new Object();
$scope.person.firstname = 'Kavlez';
$scope.person.lastname = 'Jin'

json过滤输出:

1
2
3
4
{% raw %}
{{person | json}}
{% endraw %}
<!-- { "firstname": "Kavlez", "lastname": "Jin" } -->

  • limitTo

    对字符串或数组进行截取

1
2
3
4
5
6
7
8
9
{% raw %}
{{'Kavlez!!!!' | limitTo:6 }}
{% endraw %} <!-- Kavlez -->
{% raw %}
{{'Kavlez!!!!' | limitTo:-4 }}
{% endraw %} <!-- !!!! -->
{% raw %}
{{['0','1','2','3','4','5'] | limitTo:1 }}
{% endraw %} <!-- ["0"]-->
  • orderBy

    对数组进行排序，该filter有两个参数，分别是排序依据和正逆序(可选)

1
2
3
4
5
6
7
8
9
10
11
{% raw %}
{{[
    {'alphabet': 'K'},
    {'alphabet': 'A'},
    {'alphabet': 'V'},
    {'alphabet': 'L'},
    {'alphabet': 'E'},
    {'alphabet': 'Z'}] 
    | orderBy:'alphabet':true }}
{% endraw %}
<!-- [{"alphabet":"Z"},{"alphabet":"V"},{"alphabet":"L"},{"alphabet":"K"},{"alphabet":"E"},{"alphabet":"A"}] -->
  • filter

    从数组中返回指定子集

对象

1
2
3
4
5
6
7
{% raw %}
{{
    [{'firstname':'Kavlez','lastname':'Jin'},
        {'firstname':'Ken','lastname':'Jin'}] 
| filter:{'firstname': 'n'} }}
{% endraw %}
<!-- [{"firstname":"Ken","lastname":"Jin"}]  -->

字符串

1
2
3
{% raw %}
{{['K','a','v','l','e','z'] | filter:'e' }}
{% endraw %} <!-- ["e"] -->

date

以指定格式显示时间。 

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
$scope.today=new Date();

{% raw %}
{{today | date:'medium' }}
{% endraw %}<!--  Jan 24, 2015 5:36:38 PM    -->
{% raw %}
{{today | date:'short' }}
{% endraw %}<!--  1/24/15 5:36 PM    -->
{% raw %}
{{today | date:'fullDate' }}
{% endraw %}<!--  Saturday, January 24, 2015     -->
{% raw %}
{{today | date:'longDate' }}
{% endraw %}<!--  January 24, 2015   -->
{% raw %}
{{today | date:'mediumDate' }}
{% endraw %}<!--  Jan 24, 2015   -->
{% raw %}
{{today | date:'shortDate' }}
{% endraw %}<!--  1/24/15   -->
{% raw %}
{{today | date:'mediumTime' }}
{% endraw %}<!--  5:36:38 PM   -->
{% raw %}
{{today | date:'shortTime' }}
{% endraw %}<!--  5:36 PM   -->
{% raw %}
{{today | date:'yyyy' }}
{% endraw %}<!--  2015  -->
{% raw %}
{{today | date:'yy' }}
{% endraw %}<!--  15   -->
{% raw %}
{{today | date:'y' }}
{% endraw %}<!--  2015  -->
{% raw %}
{{today | date:'MMMM' }}
{% endraw %}<!--  January   -->
{% raw %}
{{today | date:'MMM' }}
{% endraw %}<!--  Jan   -->
{% raw %}
{{today | date:'MM' }}
{% endraw %}<!--  01  -->
{% raw %}
{{today | date:'M' }}
{% endraw %}<!--  1  -->
{% raw %}
{{today | date:'dd' }}
{% endraw %}<!--  24  -->
{% raw %}
{{today | date:'d' }}
{% endraw %}<!--  24  -->
{% raw %}
{{today | date:'EEEE' }}
{% endraw %}<!--  Saturday   -->
{% raw %}
{{today | date:'EEE' }}
{% endraw %}<!--  Sat   -->
{% raw %}
{{today | date:'HH'}}
{% endraw %} <!--  17  -->
{% raw %}
{{today | date:'H'}}
{% endraw %} <!--  17  -->
{% raw %}
{{today | date:'hh'}}
{% endraw %} <!--  05  -->
{% raw %}
{{today | date:'h'}}
{% endraw %} <!--  5  -->
{% raw %}
{{today | date:'mm' }}
{% endraw %}<!--  36  -->
{% raw %}
{{today | date:'m' }}
{% endraw %}<!--  36  -->
{% raw %}
{{today | date:'ss' }}
{% endraw %}<!--  38  -->
{% raw %}
{{today | date:'s' }}
{% endraw %}<!--  38  -->
{% raw %}
{{today | date:'.sss' }}
{% endraw %}<!--  .628  -->
{% raw %}
{{today | date:'a' }}
{% endraw %}<!--  PM  -->
{% raw %}
{{today | date:'Z' }}
{% endraw %}<!--  +0800   -->
{% raw %}
{{today | date:'MMMd, y' }}
{% endraw %}<!--  Jan24, 2015  -->
{% raw %}
{{today | date:'EEEE, d, M' }}
{% endraw %} <!--  Saturday, 24, 1  -->
{% raw %}
{{today | date:'hh:mm:ss.sss' }}
{% endraw %}<!--  05:36:38.628  -->    
{% raw %}
{{today | date:'medium' }}
{% endraw %}<!--  Jan 24, 2015 5:36:38 PM    -->
{% raw %}
{{today | date:'short' }}
{% endraw %}<!--  1/24/15 5:36 PM    -->
{% raw %}
{{today | date:'fullDate' }}
{% endraw %}<!--  Saturday, January 24, 2015     -->
{% raw %}
{{today | date:'longDate' }}
{% endraw %}<!--  January 24, 2015   -->
{% raw %}
{{today | date:'mediumDate' }}
{% endraw %}<!--  Jan 24, 2015   -->
{% raw %}
{{today | date:'shortDate' }}
{% endraw %}<!--  1/24/15   -->
{% raw %}
{{today | date:'mediumTime' }}
{% endraw %}<!--  5:36:38 PM   -->
{% raw %}
{{today | date:'shortTime' }}
{% endraw %}<!--  5:36 PM   -->
{% raw %}
{{today | date:'yyyy' }}
{% endraw %}<!--  2015  -->
{% raw %}
{{today | date:'yy' }}
{% endraw %}<!--  15   -->
{% raw %}
{{today | date:'y' }}
{% endraw %}<!--  2015  -->
{% raw %}
{{today | date:'MMMM' }}
{% endraw %}<!--  January   -->
{% raw %}
{{today | date:'MMM' }}
{% endraw %}<!--  Jan   -->
{% raw %}
{{today | date:'MM' }}
{% endraw %}<!--  01  -->
{% raw %}
{{today | date:'M' }}
{% endraw %}<!--  1  -->
{% raw %}
{{today | date:'dd' }}
{% endraw %}<!--  24  -->
{% raw %}
{{today | date:'d' }}
{% endraw %}<!--  24  -->
{% raw %}
{{today | date:'EEEE' }}
{% endraw %}<!--  Saturday   -->
{% raw %}
{{today | date:'EEE' }}
{% endraw %}<!--  Sat   -->
{% raw %}
{{today | date:'HH'}}
{% endraw %} <!--  17  -->
{% raw %}
{{today | date:'H'}}
{% endraw %} <!--  17  -->
{% raw %}
{{today | date:'hh'}}
{% endraw %} <!--  05  -->
{% raw %}
{{today | date:'h'}}
{% endraw %} <!--  5  -->
{% raw %}
{{today | date:'mm' }}
{% endraw %}<!--  36  -->
{% raw %}
{{today | date:'m' }}
{% endraw %}<!--  36  -->
{% raw %}
{{today | date:'ss' }}
{% endraw %}<!--  38  -->
{% raw %}
{{today | date:'s' }}
{% endraw %}<!--  38  -->
{% raw %}
{{today | date:'.sss' }}
{% endraw %}<!--  .628  -->
{% raw %}
{{today | date:'a' }}
{% endraw %}<!--  PM  -->
{% raw %}
{{today | date:'Z' }}
{% endraw %}<!--  +0800   -->
{% raw %}
{{today | date:'MMMd, y' }}
{% endraw %}<!--  Jan24, 2015  -->
{% raw %}
{{today | date:'EEEE, d, M' }}
{% endraw %} <!--  Saturday, 24, 1  -->
{% raw %}
{{today | date:'hh:mm:ss.sss' }}
{% endraw %}<!--  05:36:38.628  -->

自定义filter

如Controller那样，filter也最好不要全局满天飞，我们需要定义在一个module里面。
这里写一个简单的例子:

1
2
3
4
5
6
7
8
var myApp = angular.module("myApp",[])
.filter('kavlezFilter',function(){
    return function(input){
        if(input){
            return 'Kavlez:\"'+input+'"';
        }
    }
});

使用该filter:

1
2
3
{% raw %}
{{'Any time, Any where, Whoever or whatever you are, just bring it on'|kavlezFilter }}
{% endraw %}

输出:

1
Kavlez:"Any time, Any where, Whoever or whatever you are, just bring it on"as

转载自:

http://www.cnblogs.com/Kavlez/p/4246203.html

文章若有纰漏请大家补充指正,谢谢~~

http://blog.xinshangshangxin.com SHANG殇