
表达式:
{{ expression | filter1 | filter2 | ... }}
{{ expression | filterName : parameter1 : ...parameterN }}
ng-repeat="a in array | filter "
一、第一种单参数过滤器:
原有数据:a乔乐
过滤数据:a乔乐[追加内容:单参数在此过滤!]
本节课程源码:
1
2
3
4
5
6
|
< h3 >一、第一种过滤器:</ h3 >< br />
原有数据:{{names[0].name}}< br />
过滤数据:{{names[0].name | filter1}} |
1
2
3
4
5
6
|
app.filter( 'filter1' , function (){
return function (item){
return item + '[追加内容:单参数在此过滤!]' ;
}
}); |
二、第二种带参数过滤器:
原有数据:a乔乐
过滤数据:a乔乐!!!!!
本节课程源码:
1
2
3
4
5
6
|
< h3 >二、第二种带参数过滤器:</ h3 >< br />
原有数据:{{names[0].name}}< br />
过滤数据:{{names[0].name | filter2:5 }} |
1
2
3
4
5
6
7
8
9
|
app.filter( 'filter2' , function (){
return function (item,num){
for ( var i = 0;i < num;i++){
item = item + '!' ;
}
return item;
}
}); |
三、第三种数组过滤器:
- 0、aa===
- 1、bb===
- 2、vv===
- 3、mm===
本节课程源码:
1
2
3
4
5
6
7
|
< h3 >三、第三种数组过滤器:</ h3 >< br />
< ul >
< li ng-repeat = "word in ['aa','bb','vv','mm'] | filter3" >{{word}}</ li >
</ ul >
|
1
2
3
4
5
6
7
8
9
10
11
|
app.filter( 'filter3' , function (){
return function (items){
angular.forEach(items, function (item, i){
item = i+ '、' + item + '===' ;
console.log(item);
items[i] = item;
});
return items;
}
}); |
四、首字母大写过滤器:
This Is Angular Js Course On Each.com
本节课程源码:
1
2
3
4
5
|
< h3 >四、首字母大写过滤器:</ h3 >< br />
{{'this is angular js course on each.com' | filter4}} |
1
2
3
4
5
6
7
8
9
10
|
app.filter( 'filter4' , function (){
return function (input) {
var words = input.split( ' ' );
for ( var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join( ' ' );
}
}); |