失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Angular自定义过滤器

Angular自定义过滤器

时间:2022-04-11 11:56:58

相关推荐

Angular自定义过滤器

独角兽企业重金招聘Python工程师标准>>>

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=“开源中国社区()是工信部开源软件推进联盟指定的官方社区链接是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>

显示的文字是

开源中国社区()是工信部 开源软件推进联盟 指定的官方社区

umbraco模板的用法

angular.module('umbraco').filter('checkmark', function() {return function(input) {if(input == 1){input="status1"}else if(input == 2){input="status2"}return input};});

参考资料

/w8888/p/5781733.html

/api

如果觉得《Angular自定义过滤器》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。