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字符编码函数区别分析
Jun 05 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
JS Attribute属性操作详解
May 19 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
vue 子组件修改data或调用操作
Aug 07 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
公司培训心得体会
2014/01/03 职场文书
年度考核评语
2014/01/19 职场文书
超市仓管员岗位职责
2014/04/07 职场文书