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>