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