zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    整数的可除性
    椭圆曲线的基本概念
    数组方法分析-笔记
    JS-作用域
    JS-变量存储
    Web框架-inoic
    圣杯布局
    js,php中的面向对象
    正则
    math对象
  • 原文地址:https://www.cnblogs.com/Aaron-Lee/p/9182344.html
Copyright © 2011-2022 走看看