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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
javascript读取RSS数据
Jan 20 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
js单词形式的运算符
May 06 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
详解React中合并单元格的正确写法
2019/01/08 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
Python中logging模块的用法实例
2014/09/29 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Django Highcharts制作图表
2016/08/27 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
Java中compareTo和compare的区别
2016/04/12 面试题
鸿星尔克广告词
2014/03/21 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
结婚典礼致辞
2015/07/28 职场文书
高中同学会致辞
2015/08/01 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
化验室安全管理制度
2015/08/06 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
z-index不起作用
2021/03/31 HTML / CSS
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js