Angular有许多不同的过滤器,但是还是有很大的限制。比如,我项目中需要在字符串中截取一段显示出来。例如时间过滤器,前面部分是获取的时间,后面是格式化的方式。除此以外还有货币,字符串,json,长度,大写,小写,数字,排序等过滤器。参考资料
{{ date_expression | date : format : timezone}}
今天我们研究下自定义过滤器如何实现。
过滤器的语法,我们自定义过滤器以后也是这样使用的。
{{ expression | filter1 | filter2 | ... }} {{ expression | filterName : parameter1 : ...parameterN }} ng-repeat="a in array | filter "
一、第一种单参数过滤器:
html文件
<h3>一、第一种过滤器:</h3><br/> 原有数据:{{names[0].name}}<br/> 过滤数据:{{names[0].name | filter1}}
js文件
app.filter('filter1',function(){ return function(item){ return item + '[追加内容:单参数在此过滤!]'; } });
二、第二种带参数过滤器:
html文件
<h3>二、第二种带参数过滤器:</h3><br/> 原有数据:{{names[0].name}}<br/> 过滤数据:{{names[0].name | filter2:5 }}
js文件
app.filter('filter2',function(){ return function(item,num){ for(var i = 0;i < num;i++){ item = item + '!'; } return item; } });
三、第三种数组过滤器:
html文件
<h3>三、第三种数组过滤器:</h3><br/> <ul> <li ng-repeat="word in ['aa','bb','vv','mm'] | filter3">{{word}}</li> </ul>
js文件
app.filter('filter3',function(){ return function(items){ angular.forEach(items,function(item,i){ item = i+'、'+ item + '==='; console.log(item); items[i] = item; }); return items; } });
在str字符串中截取前一部分文字,截取位置到参数para这里。
//例如:我们想拿到"链接是"前面的句子 str=“开源中国社区(OSChina.net)是工信部开源软件推进联盟指定的官方社区链接是xxx”;
//过滤字符串,从第一个截取。返回前一部分的内容 //这段代码写在MY_APP这个controller中 MY_APP.filter('substrStr',function(){ return function(str,para){ str = str.substr(0,str.indexOf(para)); return str; } });
html文件
<html ng-app="MY_APP"> <div ng-bind="message|| substrStr:'链接是'"></div> </html>
开源中国社区(OSChina.net)是工信部 开源软件推进联盟 指定的官方社区
参考资料
http://www.cnblogs.com/w8888/p/5781733.html
https://docs.angularjs.org/api
原文链接:https://www.f2er.com/angularjs/148358.html