AngularJs 输入框千分位指令

AngularJs的指令真的特别好用,最近需要对input框千分位显示逗号,在网上搜集了下资料并做了改良, 指令代码如下:

(function () {
    ‘use strict‘;
    angular.module(‘testModule‘)
        .directive(‘formatInputValue‘, function ($parse) {
            return {
                link: function (scope, element, attrs, ctrl) {

                    function limit() {
                        var limitV = element[0].value;
                        limitV = limitV.replace(/[^0-9.]/g, "");
                        element[0].value = limitV;
                        $parse(attrs[‘ngModel‘]).assign(scope, limitV);
                        format();

                    }

                    function limitBind() {
                        var limitV = element.context.innerHTML;
                        limitV = limitV.replace(/[^0-9.]/g, "");
                        element.context.innerHTML = limitV;
                        $parse(attrs[‘ngBind‘]).assign(scope, limitV);
                        formatBind();
                    }

                    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];
                        if (attrs.name == "oneDecimal"&&array.length>1) {

                            returnV += "." + (array[1].toString().substring(0, 1));
                        }
                        else if(attrs.name == "noDecimal")
                        {
                            //keep the no decimal value
                        }
                        else{
                        for (var i = 1; i < array.length; i++) {
                            returnV += "." + array[i];
                            }
                        }
                        element[0].value = returnV;

                        if (formatV == ‘‘)
                        {
                            $parse(attrs[‘ngModel‘]).assign(scope, ‘‘);
                        }
                        else if( formatV==null)
                        {
                            $parse(attrs[‘ngModel‘]).assign(scope, null);
                        }
                        else if ((formatV.indexOf(‘.‘) > 0) && array.length == 2 && attrs.name != "noDecimal") {
                            if (attrs.name == "oneDecimal")
                            {
                                var formatArr = new Array();
                                formatArr= formatV.split(".");
                                formatV = formatArr[0];
                                if (formatArr.length > 1)
                                { formatV += "." + (formatArr[1].toString().substring(0, 1)); }
                            }

                                $parse(attrs[‘ngModel‘]).assign(scope, formatV);
                        }
                        else {
                            $parse(attrs[‘ngModel‘]).assign(scope, parseFloat(formatV));
                        }

                    }

                    function formatBind() {
                        var formatV = element.context.innerHTML;
                        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.context.innerHTML = returnV;
                        $parse(attrs[‘ngBind‘]).assign(scope, formatV);
                    }

                    if (attrs.ngModel) {
                        scope.$watch(attrs.ngModel, function () {
                            limit();
                        })

                    }
                    else {
                        scope.$watch(attrs.ngBind, function () {
                            limitBind();
                        })
                    }

                }
            };
        })
}());
             //会显示小数, 小数后不会进行千分位的划分,只有整数部分会进行划分
             <input class="form-control" ng-model="detail.x"  name="noDecimal" format-input-value /></td> 

             //不会显示小数
             <input class="form-control" ng-model="detail.x"  name="noDecimal" format-input-value /></td>   

             //会显示一位小数
             <input class="form-control" ng-model="detail.y"  name="oneDecimal" format-input-value /></td>

原文地址:https://www.cnblogs.com/Aaron-Lee/p/9182344.html

时间: 2024-10-05 01:11:22

AngularJs 输入框千分位指令的相关文章

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

总计字段上加格式:如千分位 比较笨拙的一种方法

//总计字段上加格式:如千分位1.MonWastageSumVO1为table名称2.Totalloss对应table总计字段名称3.bValues是赋给总计的值OATableBean table = (OATableBean)webBean.findIndexedChildRecursive("MonWastageSumVO1");OAWebBean abl = table.findIndexedChildRecursive("Totalloss");if (nu

[js开源组件开发]数字或金额千分位格式化组件

数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和数字的千分位和小数点控制的组件,它的作用主要是在输入框时限制输入的内容为数字.也可以用于普通标签的数字格式化,效果如下图: demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html 源码github托管地址请点击https://gi

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

js jquery版本的 金额千分位转换函数(非正则,效率极高)

没想到js里面没有 金额千分位格式化的处理函数(例:1,234.01 这样的格式),网上搜了一圈,都是使用正则的方式处理的.正则的效率不敢恭维啊,又耗费资源速度又慢(虽然处理起来会直观一些). 因此专门写了一个纯数值处理最后输出字符串个 金额千分位处理函数,并封装成jQuery函数包,处理时效率很高,可高频率的使用,直接上代码.还有min压缩版本可点击连接下载. 如果你不是jQuery环境,直接把源码拿出来,重新封装到自己的函数中能够就能用. 源码以及min包下载地址:jQuery.format

PHP中数字转为百分位,千分位,万分位。。。

今天做项目中,需要将文章点击量显示在页面中,需求中给的是多少多少万,虽然不是什么难事,但做程序员这么久了,需要考虑的不再是简单的实现,而且有效率和快捷, 虽然PHP自带的函数有number_format()可以做到实现千分位,但我要的是万分位, 通过查找,发现了可以用以下这个方法: $num = 86231; # 将数字转为万分位 echo $num>10000?sprintf("%.1f", $num/10000):$num; 类似的通过这个方法,可以稍微修改下,就可以实现百分

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

两种方法解决数字加千分位问题(没考虑负数和小数)

问题描述:数字加千分位:要求用户输入一个整数,编写一个方法,方法将将整数转换为一个从低位开始每三位一个逗号的“千分位”字符串表示形式. //正向解法 package ThirdTest;import java.util.Scanner;public class No2{ public static void main(String[] args) { Scanner sc=new Scanner(System.in); int num=sc.nextInt(); thousand(num); s

sql为数字添加千分位(也就是钱的格式)

感觉这个东西在项目中用得挺多的,之前在前台页面是用正则来处理,现在由于是数据查询,所以直接在查出数据的时候将其转为指定的千分位格式,省的前台再处理,不讲原理,因为我也看不懂,不过会用就行了,在网上找了下,现在自己记录下,方便自己查看. Sql获取数字的千分位,就是将一个数字以三位,用逗号隔开,sql代码如下: (1)不带小数点: select reverse(stuff(reverse(convert(varchar,convert(money,1234333000),1)),1,3,''))