angularjs 自定义过滤器filter和用法

最新推荐文章于 2019-07-04 13:38:37 发布

胖鹅68

最新推荐文章于 2019-07-04 13:38:37 发布

阅读量602

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/52683355

版权

自定义过滤器例子：

//创建一个sqhApp模块
var app = angular.module("sqhApp",["ionic"], function($httpProvider) {});

//sqhApp模块下创建一个过滤器replaceStr，filter的第二个参数方法是没有任何参数的
angular.module("sqhApp").filter('replaceStr', function () {
	/**
	 * input 前一个命令的输入，需要处理的字符串
	 * startNum 第一个字符串的起始位置
	 * endNum 最后一个字符串的位置
	 * charCode 被替换字母
	 */
	return function (input, startNum, endNum, charCode) {
		//如果没有数据的时候，则返回空字符串
		if (input == undefined || input == "") {
			return "";
		}
		//没有指定隐藏显示的类型，则默认是*
		if (charCode == undefined || charCode == "") {
			charCode = "*";
		}
		var strArray = input.split("");
		//console.log(strArray);
		for (var i = startNum - 1; i < endNum; i++) {
			strArray[i] = charCode;
		}
		return strArray.join("");
	}

})

自定义的过滤器一定要判断输入的参数，否则，如果在数据没有的情况下左处理，会出现逻辑错误！

使用过滤器方法：

使用“|”作为过滤器方法的引用，使用“ : ”作为参数的传递

<div class="item item-icon-left item-icon-right" ng-click="editPhone()">
	<i class="icon" style="font-size: 16px;">手机号码</i>
	<h3 class="text-right color_99">
	<!-- replaceStr过滤器方法传递4和7两个参数分别对应startNum和endNum -->
		{{formData.mobile | replaceStr:4:7}}</h3>
	<i class="icon ion-ios-arrow-right color_99"></i>
</div>