AngularJs 输入框千分位指令

Posted 2020-07-25 Aaron_M

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>