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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
Vue分页插件的前后端配置与使用
Oct 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP 图片水印类代码
2012/08/27 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vue中touch和click共存的解决方式
2020/07/28 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python 系统调用的实例详解
2017/07/11 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
法律顾问服务方案
2014/05/15 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
热情服务标语
2014/10/07 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
给上级领导的感谢信
2015/01/22 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python