angular 实现的输入框数字千分位及保留几位小数点功能示例


Posted in Javascript onJune 19, 2018

本文实例讲述了angular 实现的输入框数字千分位及保留几位小数点功能。分享给大家供大家参考,具体如下:

网上查到一个关于千分位的指令,我稍微做了点完善,通用指令代码

myApp.directive('price', function($parse) {
 return {
  link: function (scope, element, attrs, ctrl) {
    //控制输入框只能输入数字和小数点
    function limit(){
      var limitV=element[0].value;
      limitV=limitV.replace(/[^0-9.]/g,"");
      //处理0开头的整数
      if ((/^0+[0-9]+$/).test(limitV)) {
        limitV=limitV.replace(/\b(0+)/gi,"");
      }
      //限定小数点后的位数
      var digits = attrs['digits']?Number(attrs['digits']):2;
      if (limitV*Math.pow(10,digits)%1!=0) {
        var index = limitV.indexOf('.');
        var last = index+digits+1;
        limitV = (""+limitV).substring(0,last);
      }
      element[0].value=limitV;
      $parse(attrs['ngModel']).assign(scope, limitV);
      format();
    }
    //对输入数字的整数部分插入千位分隔符
    function format(){
      var formatV=element[0].value;
      var array=new Array();
      array=formatV.split(".");
      var re=/(-?\d+)(\d{3})/;
      while(re.test(array[0])){
        array[0]=array[0].replace(re,"$1,$2")
      }
      var returnV=array[0];
      for(var i=1;i<array.length;i++){
        returnV+="."+array[i];
      }
      element[0].value=returnV;
      $parse(attrs['ngModel']).assign(scope, formatV);
    }
    scope.$watch(attrs.ngModel,function(){
      limit();
    })
  }
 };
})

html代码的引用,digits传的是小数点后保留几位,默认不传保留2位

<input ng-model="money" price digits="1"/>
Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
js右键菜单效果代码
Jul 21 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
JS正则表达式常见用法实例详解
Jun 19 #Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 #Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 #Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 #Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 #Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 #Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 #Javascript
You might like
在WIN98下以apache模块方式安装php
2006/10/09 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
js防止表单重复提交的两种方法
2013/09/30 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
python中管道用法入门实例
2015/06/04 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
基于python实现雪花算法过程详解
2019/11/16 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
上课看小说检讨书
2014/02/22 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
驾驶员管理制度范本
2015/08/06 职场文书