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引起的内存泄漏问题
Oct 08 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 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 session机制
2011/07/17 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Vue精简版风格概述
2018/01/30 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python实现猜数字游戏
2020/03/25 Python
python操作toml文件的示例代码
2020/11/27 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
python中re模块知识点总结
2021/01/17 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
c/c++某大公司的两道笔试题
2014/02/02 面试题
学雷锋标兵事迹材料
2014/08/18 职场文书
面试通知单大全
2015/04/20 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书