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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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/04 无线电
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Python对文件操作知识汇总
2016/05/15 Python
Python全局变量用法实例分析
2016/07/19 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
一名老师的自我评价
2014/02/07 职场文书
新教师培训心得体会
2014/09/02 职场文书
客房部经理岗位职责
2015/02/02 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
导游词之唐山景点
2019/12/18 职场文书
Python学习之包与模块详解
2022/03/19 Python