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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Require.js的基本用法详解
Jul 03 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
AngularJs中$cookies简单用法分析
May 30 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
基于JavaScript实现随机点名器
Feb 25 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数据库调用类调用实例(详细注释)
2012/07/12 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python类的基础入门知识
2008/11/24 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
PyQt5实现简易电子词典
2019/06/25 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
基于Python实现简单学生管理系统
2020/07/24 Python
10个示例带你掌握python中的元组
2020/11/23 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
合作协议书怎么写
2014/04/18 职场文书
经营理念口号
2014/06/21 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python