angularJS指令——输入框输入时按金额格式变化自动插入千位分隔符

在JS控制器中编写指令,如下所示:

.directive('toChange', 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 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){  
                        returnV+="."+array[i];  
                    }  
                    element[0].value=returnV;  
                    $parse(attrs['ngModel']).assign(scope, formatV);
                }  
          
                scope.$watch(attrs.ngModel,function(){
                    limit();
                })
            }  
          };
    })

HTML中,使用指令to-change:

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>自学H5title>
    
    <script type="text/javascript" src="lib/js/angular.min.js" >script>
    <script type="text/javascript" src="lib/js/jquery-2.0.0.min.js" >script>
    <script type="text/javascript" src="js/indexCtrl.js" >script>
    
    <script type="text/javascript">
        
           document.addEventListener('plusready', function(){
               //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"
               
           });
           
    script>
head>
<body ng-app="myApp" ng-controller="indexCtrl">
    <div>this在angularJS中不管用,需使用$eventdiv>
    <input ng-model="a" to-change/>
body>
html>

该指令只改变输入框中显示值样式(含有千分符),实际取值为金额。

转载于:https://www.cnblogs.com/chenjieXie/p/6479233.html

你可能感兴趣的:(angularJS指令——输入框输入时按金额格式变化自动插入千位分隔符)