AngularJS：自定义过滤器

表达式：
        {{ expression | filter1 | filter2 | ... }}
        {{ expression | filterName : parameter1 : ...parameterN }}
        ng-repeat="a in array | filter "

一、第一种单参数过滤器：

原有数据：a乔乐
过滤数据：a乔乐[追加内容：单参数在此过滤！]

本节课程源码：

<h3>一、第一种过滤器：</h3><br/>
原有数据：{{names[0].name}}<br/>
过滤数据：{{names[0].name | filter1}}

app.filter('filter1', function(){
    return function(item){
        return item + '[追加内容：单参数在此过滤！]';
    }
});

 

二、第二种带参数过滤器：

原有数据：a乔乐
过滤数据：a乔乐!!!!!

本节课程源码：

<h3>二、第二种带参数过滤器：</h3><br/>
原有数据：{{names[0].name}}<br/>
过滤数据：{{names[0].name | filter2:5 }}

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===

本节课程源码：

<h3>三、第三种数组过滤器：</h3><br/>
<ul>
    <li ng-repeat="word in ['aa','bb','vv','mm'] | filter3">{{word}}</li>
</ul>

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

本节课程源码：

<h3>四、首字母大写过滤器：</h3><br/>
{{'this is angular js course on each.com' | filter4}}

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(' ');
    }
});