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<array.length;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>自学H5</title>
    <!-- js -->
    <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>
    <!-- css -->
    <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中不管用，需使用$event</div>
    <input ng-model="a" to-change/>
</body>
</html>

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

posted @ 2017-02-28 15:53  宝宝&贝贝  阅读(3970)  评论(0)    收藏  举报