AngularJS：自定义过滤器

表达式：
        {{ 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(' ');
    }
});
 
posted @ 2016-08-17 20:11  即使我是一个小前端  阅读(1386)  评论(0)  编辑  收藏  举报