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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
Javascript 二维数组
Nov 26 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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 删除记录实现代码
2009/03/12 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php定界符
2014/06/19 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
javascript multibox 全选
2009/03/22 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
vue实现计算器功能
2020/02/22 Javascript
python对DICOM图像的读取方法详解
2017/07/17 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
基于Python List的赋值方法
2018/06/23 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
python开发前景如何
2020/06/11 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
Java基础知识面试题
2014/03/25 面试题
初中三年毕业生的自我评价分享
2014/02/14 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
初中语文教师研修日志
2015/11/13 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
python实现图片批量压缩
2021/04/24 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
人民币符号
2022/02/17 杂记
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers