我怎样才能使用AngularJSfilter格式化一个数字,以领先的零?

我检查了文件

http://docs-angularjs-org-dev.appspot.com/api/ng.filter:number

但对我来说还是不清楚的。 我想要的是我的号码有四位数字和前导零。

22 > 0022 1 > 0001 

有人可以帮助,并告诉我,如果这是可能的数字或另一种filter?

不需要filter,只需在你的html中使用一个expression式即可

 {{("00000"+1).slice(-6)}} // '000001' {{("00000"+123456).slice(-6)}} // '123456' 

假设您的应用程序myApp有一个名为myModule的模块:

 angular.module('myApp', ['myModule']); 

在这个模块中定义你的filter:

 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; }; }); 

在标记中使用你的filter:

 {{myValue | numberFixedLen:4}} 

保持最小…(与string和数字一起工作)做一些validation,如果你必须(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); }; }); 

如果你希望它更小,浏览器支持箭头function,或者你正在使用babel / traceur,那么它可以被缩减为:

 app.filter('numberFixedLen', ()=>(a,b)=>(1e4+""+a).slice(-b)); 

HTML:

 {{myValue | numberFixedLen:4}} 

注意这样做的灵活性较低,这只适用于10000以下的数字,如果数字更大,则必须增加41e4或者使用其他任何dynamic解决scheme。
这是为了尽可能快地做到尽可能less的事情。

这和故意的是一样的:

 ("10000"+1234567).slice(-4) // "4567" ("10000"+1234567).slice(-9) // "001234567" 

使用underscore.string的填充函数和angular-underscore-stringfilter的最小代码:

在jsFiddle工作演示


angular度stringinput – >angular度 – 下划线 – stringfilter – > 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 

svariables是指string库。 在较旧的版本中,您可能必须将其replace为“_.str”,即。 {{ num | _.str: 'pad':[4, '0'] }}

你可以使用纯JavaScript如

 ('00000'+refCounter).substr(-5,5) 

用5填充refCounter的值。

注意:确保检查refCounter是不是未定义 ,否则你会得到一个exception。

如果你只是处理“0”填充,并不介意按照用例来定制你的filter,我会用类似于Endless的速度来回答一些问题,但是会build议你确保这个数字还不够长喜欢:

 app.filter('minLength', function () { return function(input,len){ input = input.toString(); if(input.length >= len) return input; else return("000000"+input).slice(-len); } }); 

因为这样不仅可以避免修剪已经满足最小长度的数字或string,这对于避免奇怪的东西很重要,例如:

 {{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code 

但通过使用“000000”而不是像1e6这样的数字,可以避免同时改变input的实际值(通过不添加1000000),并避免将数字隐式转换为string,从而节省考虑input的计算步骤已经被转换成string来避免上面提到的剪辑问题。

如果你想要一个不需要任何用例testing的系统,比bguiz的解决scheme更快更灵活,我使用如下的filter:

 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" 

但也给你select添加非零填充选项,如:

 {{ 22 | minLength:4:"-" }} //Returns "--22" 

你可以使用数字或string来执行古怪的东西:

 {{ "aa" | minLength:4:"&nbsp;" }} //Returns " aa" 

另外,如果input的时间已经超过了你想要的长度,那么滤波器就会在没有任何调整的情况下popup:

 {{ 1234567 | minLength:4 }} //Returns "1234567" 

您还避免了需要为len添加validation,因为当您调用没有len参数的filter时,angular会在您的控制台中的RangeError中尝试创build一个长度为null的数组,从而使其debugging变得简单。

如果需要修改,请使用下面的filter修改

  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> 

另一个例子:

 // 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; }; }); 

最干净的将是创build你自己的filterangular度和使用它。 已经有几个答案,但我个人觉得这是最简单的阅读。 按需要的零长度创build一个数组,然后用零连接数组。

 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}} 

演示: http : //www.bootply.com/d7SbUz57o8

这是TypeScript中指令的Angular 1.x变体,它可以处理整数和小数。 由于TS,一切都被认为是“types安全的”。

 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; } });