AngularJs学习笔记__6、自定义过滤器，阿拉伯数字金额转汉字金额

最新推荐文章于 2023-04-11 08:43:07 发布
最新推荐文章于 2023-04-11 08:43:07 发布
阅读量3.0k 收藏 1
点赞数
分类专栏： AngularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/polo_longsan/article/details/47679715
版权

虽然，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>
效果如下：




polo_longsan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue filter过滤器
珍妮的小罐君
06-20 461
vue项目中，如果需要对某个字段进行处理，一般我们会写一个filter，如下，我们新建一个filters.js的文件，然后声明了两个filter,如下所示： const viCurrency = (val: any) => { if (!val) { return null; } let money = Math.ceil(+val); ...
vue filter 过滤器
本杰明的博客
07-17 3179
在项目开发中，我们常常需要把一些常见的文本格式化，比如说后端返回手机号需要加星号处理，或者说把一些数字加上货币单位如果说我们把这些操作在methods选项中注册为一个方法的话，虽然也是一种可行的方法，但是其缺点也很明显：methods选项常常被用来组织页面数据和交互逻辑，简单的文本处理杂糅其中语义化不明显且methods过重首先要注意几点： 1. vue1中的uppercase等vue自带过滤器
js input 过滤成带小数的数字/金额
relnardo的博客
04-11 200
【代码】js input 过滤成带小数的数字/金额。
AngularJs根据获取到的数值转换成对应的中文
Jin_Amy的博客
03-17 2986
我们经常会遇到将获取到的数值转换成对应的中文，比如性别，状态等 自己的原始数据为：var info = { name: "Jack", sex: 1 }; 在界面中数据展示的部分： {{getSex(info.sex)}} getSex为方法名，将你要展示的数值当做参数放入该方法中 在对应的js文件中可以写： $scope.getSex = function(sex
angular过滤器filter常用方法，自定义过滤器
前端小狮的博客
04-12 1万+
简单介绍AngularJS过滤器filter用法，每个都将列出用法代码以便加深了解； 内置过滤器： currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序) 用法： 1.currency(货币) 使用cur...
Android金额输入控件
MIRROR的博客
08-29 3398
金额输入控件最近在做一个金融的项目，里面有关于金额的判断和限制金额的输入，然后就发现了些问题。比如我们输入金额的时候肯定只能输入数字和点号，不能输入其他的字符;还有进行金额判断的时候很麻烦，比如要金额不能为0878787.98、.898或者0000000.98等等这样的。每次都要进行这样的判断很麻烦，又很耗时而且又容易出错，然后就在想能不能自己自定义一个控件来限制输入规范它，并且能将判断在内部处理。
EXCEL办公自动化二级考试操作学习笔记_03.pdf
07-06
MS_OFFICE二级考试之EXCEL操作笔记
AngularJS基础学习笔记之控制器
01-21
AngularJS控制器用来控制AngularJS applications的数据。 　AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器 　AngularJS applications通过控制器进行控制。 　ng-controller指令定义了一个application...
EXCEL办公自动化二级考试操作学习笔记_05.pdf
07-06
MS_OFFICE二级考试之EXCEL操作笔记
EXCEL办公自动化二级考试操作学习笔记_04.pdf
07-06
MS_OFFICE二级考试之EXCEL操作笔记
EXCEL办公自动化二级考试操作学习笔记_02 .pdf
07-06
MS_OFFICE二级考试之EXCEL操作笔记
angularJS数字转中文
乄Cokie乄的博客
02-26 695
HTML &amp;lt;div&amp;gt;{{num}}&amp;lt;/div&amp;gt; &amp;lt;div&amp;gt;{{num2}}&amp;lt;/div&amp;gt; &amp;lt;div&amp;gt;---------------------------------------------------&amp;lt;/div&amp;gt; &amp;lt;d
阿拉伯数字转汉字（1=＞一）
love_weiai的博客
07-28 531
toChinesNum(num) { let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] let unit = ['', '十', '百', '千', '万'] num = parseInt(num) let getWan = (temp) => { let strArr = temp.toString().split('').reverse() let newNum = '' ..
angularJs过滤器（货币转换，大小写，字数限制，日期）
泠泠似水
05-31 4559
<div ng-app="module" ng-controller="ctrl" style="text-align: center"> <!--原值--> {{price}} <br> <!--使用currency过滤器--> {{price|currency}} <br> <!--使用currency过滤器用固定的前缀--> {{price|cu
经典数字转换成大写金额函数 （测试可用）
yiyisuifeng的专栏
11-08 1302
// 数字转换成大写金额函数 function atoc(numberValue){ var numberValue=new String(Math.round(numberValue*100)); // 数字金额 var chineseValue=""; // 转换后的汉字金额 var String1 = "零壹贰叁肆伍陆柒捌玖"; // 汉字数字 var String2 = "万仟佰
AngularJS input number 保留两位小数
热门推荐
JavaEE_Linux
05-31 1万+
在网上查询了好多说用step="0.01" 不能够满足ng-model 绑定的值 后来找到了currency-format="number"     <!-- type="number" step="0.01"  --> 可以保留三位小数 也算可以满足需求
angular-过滤器currency货币格式
guohao326的博客
05-01 8215
货币格式过滤器             原始输出数据的方式：                 通过拼接输出数据的方式：￥.00                                 对于要展示的货币数据【原始数据就是数字】             按照指定的货币格式进行输出                 货币过滤器输出：         货币
AnglurJS将金额转换为大写金额
MrXu的博客
03-23 911
在许多PC页面，APP页面都需要将数字金额转变成大写金额。我针对这一问题将我的研究成果分享给大家： 我用的是AnglurJs，AnglurJs自带了许多过滤，最常用的就属时间过滤了例如： 前台代码：<div class="font-small" style="">{{milestone.winBidDate|date:'yyyy-MM-dd'}}</div>后台代码：$scope.milesto
AngularJS中数据库字段中的数字状态位在前台显示时转换为汉字
跟着BOSS有肉吃
12-18 1753
当我们查询数据库中的信息时，关于表示状态的字段，通常用0，1，2....表示，然而在视图上用户并不能理解字段的真正含义，因为他不是表的设计者，所以就需要进行转换。 数据库表中有字段——业务开通标志（bsOpenSign），它的取值有两种：0，关闭；1，开通     显然后者更能直观的表达字段的含义。 //查询到的数据存到items中 $scope.items=[]; 前台显示代码： ...
java jws soaphandler_webservice系统学习笔记7-使用handler实现过滤器/拦截器效果
最新发布
05-31
在JWS SOAP Web Service中，可以使用Handler实现过滤器/拦截器的效果，对接口请求和响应进行处理。 Handler是Java EE中的一个标准接口，用于处理Web Service请求和响应。在JWS SOAP Web Service中，Handler可以对请求和响应进行处理，类似于Servlet中的过滤器和拦截器。 Handler可以在请求到达Web Service之前或者响应离开Web Service之后进行处理，可以对SOAP消息的头和体进行处理，可以修改SOAP消息中的内容，可以设置SOAP消息的属性等。 在JWS SOAP Web Service中，使用Handler需要完成以下步骤： 1. 创建Handler类，实现javax.xml.ws.handler.Handler接口，并实现其方法。 2. 在Web Service实现类中，使用@HandlerChain注解指定Handler链的位置和名称。 3. 在Handler链的配置文件中，指定Handler类的位置和名称，并指定Handler类的处理顺序。 示例代码如下： Handler类： ```java public class MyHandler implements SOAPHandler<SOAPMessageContext> { public boolean handleMessage(SOAPMessageContext context) { Boolean outbound = (Boolean) context.get(MessageContext.MESSAGE_OUTBOUND_PROPERTY); if (outbound) { System.out.println("Handle outbound message."); } else { System.out.println("Handle inbound message."); } return true; } public boolean handleFault(SOAPMessageContext context) { System.out.println("Handle message fault."); return true; } public void close(MessageContext context) { System.out.println("Close handler."); } public Set<QName> getHeaders() { return null; } } ``` Web Service实现类： ```java @WebService @HandlerChain(file = "handler-chain.xml") public class MyWebService { @WebMethod public String sayHello(String name) { return "Hello, " + name + "!"; } } ``` Handler链配置文件handler-chain.xml： ```xml <?xml version="1.0" encoding="UTF-8"?> <handler-chains xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/handler-chains_1_0.xsd"> <handler-chain> <handler> <handler-class>com.example.MyHandler</handler-class> </handler> </handler-chain> </handler-chains> ``` 在上面的示例中，我们创建了一个MyHandler类，实现了javax.xml.ws.handler.Handler接口，并实现了handleMessage、handleFault、close和getHeaders方法。在MyWebService类中，使用@HandlerChain注解指定了Handler链的位置和名称。在handler-chain.xml中，指定了MyHandler类的位置和名称，并指定了处理顺序。 当Web Service被调用时，MyHandler类会对请求和响应进行处理，并输出相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值