答案 0 :(得分:91)
不需要过滤器,只需在html中使用表达式
{{("00000"+1).slice(-6)}} // '000001'
{{("00000"+123456).slice(-6)}} // '123456'
答案 1 :(得分:62)
假设您的应用myModule
中有一个名为myApp
的模块:
angular.module('myApp', ['myModule']);
在此模块中定义过滤器:
angular.module('myModule', [])
.filter('numberFixedLen', function () {
return function (n, len) {
var num = parseInt(n, 10);
len = parseInt(len, 10);
if (isNaN(num) || isNaN(len)) {
return n;
}
num = ''+num;
while (num.length < len) {
num = '0'+num;
}
return num;
};
});
在标记中使用过滤器:
{{myValue | numberFixedLen:4}}
答案 2 :(得分:45)
保持最小化......(适用于字符串和数字)如果必须(isNumber,NaN)进行一些验证
// 1e8 is enough for working with 8 digits (100000000)
// in your case 1e4 (aka 10000) should do it
app.filter('numberFixedLen', function () {
return function(a,b){
return(1e4+""+a).slice(-b);
};
});
如果你想要它甚至更小并且浏览器支持箭头功能或者你正在使用babel / traceur那么它可以简化为:
app.filter('numberFixedLen', () => (a, b) => (1e4 + "" + a).slice(-b))
HTML:
{{ myValue | numberFixedLen:4 }}
注意这种灵活性较低,这只适用于低于10000的数字,如果数字较大则必须同时增加4
和1e4
或使用任何数字其他动态解决方案。
这是为了尽可能快地尽可能少。
故意与做同样的事情:
("10000"+1234567).slice(-4) // "4567"
("10000"+1234567).slice(-9) // "001234567"
更新您还可以使用padStart(但在IE中无效)
// app.filter('numberFixedLen', () => (a, b) => ("" + a).padStart(b, 0))
console.log("1234567".padStart(4, 0)) // "1234567"
console.log("1234567".padStart(9, 0)) // "001234567"
答案 3 :(得分:8)
使用underscore.string padding函数和angular-underscore-string filter的最低代码:
角度字符串输入 - &gt;角 - 下划线 - 字符串过滤器 - &gt; underscore.string
<div ng-app="app" ng-controller="PadController">
<div ng-repeat="num in nums">{{ num | s: 'pad':[4, '0'] }}</div>
</div>
angular.module('app', ['underscore.string']).controller('PadController', function ($scope) {
$scope.nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
});
// 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
s
变量引用字符串库。在旧版本中,您可能必须将其替换为&#34; _。str&#34;,即。 {{ num | _.str: 'pad':[4, '0'] }}
答案 4 :(得分:6)
如果您只使用“0”填充处理并且不介意通过用例定制过滤器,我会选择类似于Endless的速度答案,但建议您确保数字不长足够的东西像:
app.filter('minLength', function () {
return function(input,len){
input = input.toString();
if(input.length >= len) return input;
else return("000000"+input).slice(-len);
}
});
因为这不仅可以修复已经满足最小长度的数字或字符串,这对于避免奇怪的事情非常重要:
{{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code
但是通过使用“000000”而不是像1e6这样的数字,你可以避免改变输入的实际值(通过不向它添加1000000)并避免需要将数字隐式转换为字符串,从而节省计算步骤考虑到输入已经转换为字符串以避免上面提到的剪辑问题。
如果您想要一个不需要任何用例测试的系统,它比bguiz的解决方案更快,更灵活,我使用的过滤器如下:
app.filter('minLength', function(){
return function(input, len, pad){
input = input.toString();
if(input.length >= len) return input;
else{
pad = (pad || 0).toString();
return new Array(1 + len - input.length).join(pad) + input;
}
};
});
这允许您执行标准:
{{ 22 | minLength:4 }} //Returns "0022"
但是也可以选择添加非零填充选项,如:
{{ 22 | minLength:4:"-" }} //Returns "--22"
你可以使用数字或字符串强制执行古怪的东西,如:
{{ "aa" | minLength:4:" " }} //Returns " aa"
另外,如果输入已经超过了您想要的长度,过滤器只会将其弹回而不进行任何修剪:
{{ 1234567 | minLength:4 }} //Returns "1234567"
您还可以避免为len
添加验证,因为当您在没有len
参数的情况下调用过滤器时,angular会在您尝试的行的控制台中抛出RangeError
创建一个长度为null
的数组,使其易于调试。
答案 5 :(得分:5)
您可以使用纯JavaScript,例如
('00000'+refCounter).substr(-5,5)
用5个零填充 refCounter 的值。
注意:请务必检查 refCounter 是否未定义,否则您将获得例外。
答案 6 :(得分:3)
如果需要进行某些修改,请使用以下过滤器修改
app.filter('customNo', function () {
return function (input) {
var n = input;
return (n < 10) ? '000' + n : (n < 100) ? '00' + n : (n < 1000) ? '0' + n : '' + n;
}
});
<span>{{number|customNo}}</span>
答案 7 :(得分:1)
另一个例子:
// Formats a number to be at least minNumberOfDigits by adding leading zeros
app.filter('LeadingZerosFilter', function() {
return function(input, minNumberOfDigits) {
minNumberOfDigits = minNumberOfDigits || 2;
input = input + '';
var zeros = new Array(minNumberOfDigits - input.length + 1).join('0');
return zeros + input;
};
});
答案 8 :(得分:0)
最干净的是以角度创建自己的过滤器并使用它。已经有一些答案,但我个人觉得最容易阅读。按所需的零长度创建一个数组,然后用零加入数组。
myApp.filter('customNumber', function(){
return function(input, size) {
var zero = (size ? size : 4) - input.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + input;
}
});
使用它像:
{{myValue | customNumber}}
我也做了,所以你可以指定前导零作为参数:
{{myValue | customNumber:5}}
答案 9 :(得分:0)
这是TypeScript中指令的Angular 1.x变体,它可以处理整数和小数。由于TS,一切都被认为是'类型安全'。
adminApp.filter("zeroPadNumber",
() => (num: number, len: number): string => {
if (isNaN(num) || isNaN(len)) {
return `${num}`;
}
if (`${num}`.indexOf(".") > -1) {
var parts = `${num}`.split(".");
var outDec = parts[0]; // read the before decimal
while (outDec.length < len) {
outDec = `0${outDec}`;
}
return outDec + parts[1]; // reappend the after decimal
} else {
var outInt = `${num}`;
while (outInt.length < len) {
outInt = `0${outInt}`;
}
return outInt;
}
});
答案 10 :(得分:0)
我已经扩展@bguiz's答案,以便能够处理数组,这是我在ng-options
上使用过滤器的要求:
app.filter('numberFixedLen', function () {
return function (p, len) {
function toFixedLength(n, len) {
var num = parseInt(n, 10);
len = parseInt(len, 10);
if (isNaN(num) || isNaN(len)) {
return n;
}
num = '' + num;
while (num.length < len) {
num = '0' + num;
}
return num;
}
if (p.length) {
for (var i = 0; i < p.length; i++) {
p[i] = toFixedLength(p[i], len);
}
} else {
p = toFixedLength(p, len);
}
return p;
};
});
答案 11 :(得分:-1)
示例代码:
{{ (value > 9 ? (value > 99 ? (value > 999 ? value : '0'+value) : '00'+value) : '000'+value) }}