AngularJs学习笔记__6、自定义过滤器，阿拉伯数字金额转汉字金额_input 添加过滤器输入数字自动转成金额-优快云博客

本文介绍如何在AngularJs中实现一个自定义过滤器，将阿拉伯数字金额转换为汉字金额，包括源码解析与实际应用。

虽然，AngularJs内置了一些过滤器，但是有些时候，我们需要自己定义一些过滤器。下面就是一个阿拉伯数字金额转汉字金额的自定义过滤器。

不多说直接上源码：
filter.js

var filterApp=angular.module('FilterApp', [])
filterApp.controller('AmountFilter',function(){
	
});

filterApp.filter('Chinese',function(){
	return function(input){
		var numberValue=new String(Math.round(input*100)); // 数字金额
		var chineseValue=""; // 转换后的汉字金额
		var String1 = "零壹贰叁肆伍陆柒捌玖"; // 汉字数字
		var String2 = "万仟佰拾亿仟佰拾万仟佰拾元角分"; // 对应单位
		var len=numberValue.length; // numberValue 的字符串长度
		var Ch1; // 数字的汉语读法
		var Ch2; // 数字位的汉字读法
		var nZero=0; // 用来计算连续的零值的个数
		var String3; // 指定位置的数值
		if(len>15){
		alert("超出计算范围");
		return "";
		}
		if (numberValue==0){
		chineseValue = "零元整";
		return chineseValue;
		}

		String2 = String2.substr(String2.length-len, len); // 取出对应位数的STRING2的值
		for(var i=0; i<len; i++){
		String3 = parseInt(numberValue.substr(i, 1),10); // 取出需转换的某一位的值
		if ( i != (len - 3) && i != (len - 7) && i != (len - 11) && i !=(len - 15) ){
		if ( String3 == 0 ){
		Ch1 = "";
		Ch2 = "";
		nZero = nZero + 1;
		}
		else if ( String3 != 0 && nZero != 0 ){
		Ch1 = "零" + String1.substr(String3, 1);
		Ch2 = String2.substr(i, 1);
		nZero = 0;
		}
		else{
		Ch1 = String1.substr(String3, 1);
		Ch2 = String2.substr(i, 1);
		nZero = 0;
		}
		}
		else{ // 该位是万亿，亿，万，元位等关键位
		if( String3 != 0 && nZero != 0 ){
		Ch1 = "零" + String1.substr(String3, 1);
		Ch2 = String2.substr(i, 1);
		nZero = 0;
		}
		else if ( String3 != 0 && nZero == 0 ){
		Ch1 = String1.substr(String3, 1);
		Ch2 = String2.substr(i, 1);
		nZero = 0;
		}
		else if( String3 == 0 && nZero >= 3 ){
		Ch1 = "";
		Ch2 = "";
		nZero = nZero + 1;
		}
		else{
		Ch1 = "";
		Ch2 = String2.substr(i, 1);
		nZero = nZero + 1;
		}
		if( i == (len - 11) || i == (len - 3)){ // 如果该位是亿位或元位，则必须写上
		Ch2 = String2.substr(i, 1);
		}
		}
		chineseValue = chineseValue + Ch1 + Ch2;
		}

		if ( String3 == 0 ){ // 最后一位（分）为0时，加上“整”
		chineseValue = chineseValue + "整";
		}

		return chineseValue;

	};
});

filterMoney.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="FilterApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
</head>
<body>
	<div ng-Controller="AmountFilter">
		金额：<input type="text" ng-model="Amount"/>
		{{Amount | Chinese}}
	</div>

</body>
</html>

效果如下：