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 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
微信小程序实现多图上传
Jun 19 Javascript
vue3不同环境下实现配置代理
May 25 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
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php-fpm中max_children的配置
2019/03/15 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
javascript ajax 仿百度分页函数
2013/10/29 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python 合并文件的具体实例
2013/08/08 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
详解python logging日志传输
2020/07/01 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
学雷锋树新风演讲稿
2014/05/10 职场文书
介绍信样本
2015/01/31 职场文书
党课主持词大全
2015/06/30 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang