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 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
Python操作mongodb的9个步骤
2018/06/04 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python3多线程基础知识点
2019/02/19 Python
简单了解python的内存管理机制
2019/07/08 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
卫生安全检查制度
2014/02/04 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
捐资助学倡议书
2014/04/15 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
初中班主任心得体会
2016/01/07 职场文书
导游词之昭君岛
2020/01/17 职场文书