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 密码强弱度检测万能插件
Feb 25 Javascript
js 操作符实例代码
Oct 24 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
js选项卡的制作方法
2017/01/23 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python hashlib加密实现代码
2019/10/17 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
vscode调试django项目的方法
2020/08/06 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
J2EE面试题
2016/03/14 面试题
出纳岗位职责
2013/11/09 职场文书
教师思想工作总结2015
2015/05/13 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书