表达式： {{ 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(' ');
}
}); |