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>
该指令只改变输入框中显示值样式（含有千分符），实际取值为金额。
