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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
sails框架的学习指南
Dec 22 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 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中实现图片的锐化
2006/10/09 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python语言描述随机梯度下降法
2018/01/04 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python 学习教程之networkx
2019/04/15 Python
Python中无限循环需要什么条件
2020/05/27 Python
浅谈python锁与死锁问题
2020/08/14 Python
python操作toml文件的示例代码
2020/11/27 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
手机被没收检讨书
2014/02/22 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记