Angular自定义过滤器

最新推荐文章于 2021-10-20 08:44:18 发布

weixin_34261739

最新推荐文章于 2021-10-20 08:44:18 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/zhangyafei/blog/813648

本文介绍了Angular中自定义过滤器的实现方法，包括单参数过滤器、带参数过滤器及数组过滤器，并通过示例展示了如何使用这些过滤器来处理字符串和其他数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘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=“开源中国社区(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)是工信部 开源软件推进联盟 指定的官方社区

umbraco模板的用法

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

参考资料

http://www.cnblogs.com/w8888/p/5781733.html

https://docs.angularjs.org/api

转载于:https://my.oschina.net/zhangyafei/blog/813648