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 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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中cookie和session的区别实例分析
2014/08/28 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Django实现自定义404,500页面教程
2017/03/26 Python
对python中Json与object转化的方法详解
2018/12/31 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
《春笋》教学反思
2014/04/15 职场文书
三年级评语大全
2014/04/23 职场文书
八年级英语教学计划
2015/01/23 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
golang 语言中错误处理机制
2021/08/30 Golang
Hive导入csv文件示例
2022/06/25 数据库