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 相关文章推荐
文字幻灯片
Jun 26 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
微信小程序实现分享商品海报功能
Sep 30 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
python 日期操作类代码
2018/05/05 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python画图高斯分布的示例
2019/07/10 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
自主招生学校推荐信
2014/09/26 职场文书
物流业务员岗位职责
2015/04/03 职场文书
天鹅湖观后感
2015/06/09 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
golang 比较浮点数的大小方式
2021/05/02 Golang
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
Java界面编程实现界面跳转
2022/06/16 Java/Android