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 相关文章推荐
js注意img图片的onerror事件的分析
Jan 01 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
微信小程序如何使用globalData的方法
Jun 06 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 显示指定路径下的图片
2009/10/29 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Python标准库与第三方库详解
2014/07/22 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
面试后的感谢信范文
2014/02/01 职场文书
小学生期末评语大全
2014/04/21 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
酒会邀请函
2015/01/31 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL