blocks|key|60749|text|如果某些修改需要，请使用下面的过滤器修改|type|unstyled|depth|inlineStyleRanges|entityRanges|data|60750|++app.filter('customNo',+function+()+{
++++++++++++return+function+(input)+{
++++++++++++++++var+n+=+input;
++++++++++++++++return+(n+<+10)+?+'000'+%2B+n+:+(n+<+100)+?+'00'+%2B+n+:+(n+<+1000)+?+'0'+%2B+n+:+''+%2B+n;
++++++++++++}
++++++++});


{{number%7CcustomNo}}|code-block|syntax|javascript|60751|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Pls use the below filter modify if required for some modifications 

<pre><code> app.filter('customNo', function () {
 return function (input) {
 var n = input;
 return (n &lt; 10) ? '000' + n : (n &lt; 100) ? '00' + n : (n &lt; 1000) ? '0' + n : '' + n;
 }
 });


&lt;span&gt;{{number|customNo}}&lt;/span&gt;
</code></pre>

blocks|key|60789|text|假设您的应用程序myApp中有一个名为myModule的模块|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|60790|angular.module('myApp',+['myModule']);|code-block|syntax|javascript|60791|在此模块中定义您的过滤器：|60792|angular.module('myModule',+[])
++++.filter('numberFixedLen',+function+()+{
++++++++return+function+(n,+len)+{
++++++++++++var+num+=+parseInt(n,+10);
++++++++++++len+=+parseInt(len,+10);
++++++++++++if+(isNaN(num)+%7C%7C+isNaN(len))+{
++++++++++++++++return+n;
++++++++++++}
++++++++++++num+=+''%2Bnum;
++++++++++++while+(num.length+<+len)+{
++++++++++++++++num+=+'0'%2Bnum;
++++++++++++}
++++++++++++return+num;
++++++++};
++++});|60793|在标记中使用过滤器：|60794|{{myValue+%7C+numberFixedLen:4}}|60795|entityMap^0|8|5|J|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

Let's say you have a module called <code>myModule</code> in your app <code>myApp</code>:

<pre><code>angular.module('myApp', ['myModule']);
</code></pre>

Define your filter in in this module:

<pre><code>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 &lt; len) {
 num = '0'+num;
 }
 return num;
 };
 });
</code></pre>

Use your filter in markup:

<pre><code>{{myValue | numberFixedLen:4}}
</code></pre>

blocks|key|277130|text|另一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277131|//+Formats+a+number+to+be+at+least+minNumberOfDigits+by+adding+leading+zeros
app.filter('LeadingZerosFilter',+function()+{
++return+function(input,+minNumberOfDigits)+{
++++minNumberOfDigits+=+minNumberOfDigits+%7C%7C+2;
++++input+=+input+%2B+'';
++++var+zeros+=+new+Array(minNumberOfDigits+-+input.length+%2B+1).join('0');
++++return+zeros+%2B+input;
++};
});|code-block|syntax|javascript|277132|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another example:

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

blocks|key|60878|text|如果您只处理"0“填充，并且不介意根据用例定制您的过滤器，我会使用类似于无尽的速度的答案，但建议您确保数字还不够长，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|60879|app.filter('minLength',+function+()+{
++++return+function(input,len){
++++++++input+=+input.toString();
++++++++if(input.length+>=+len)+return+input;
++++++++else+return("000000"%2Binput).slice(-len);
++++}
});+|code-block|syntax|javascript|60880|因为这不仅可以避免修剪已经满足最小长度的数字或字符串，这对于避免奇怪的事情很重要，比如：|60881|{{+0.23415336+%7C+minLength:4+}}+//Returns+"0.23415336"+instead+of+"5336"+like+in+Endless's+code|60882|但是通过使用"000000“而不是像1e6这样的数字，您既避免了更改输入的实际值(通过不向其添加1000000+)，也避免了隐式地将数字转换为字符串的需要，从而节省了计算步骤，因为输入已经转换为字符串，从而避免了上面提到的裁剪问题。|60883|如果你想要一个不需要任何用例测试的系统，它比bguiz的解决方案更快更灵活，我使用的过滤器如下：|60884|app.filter('minLength',+function(){
++return+function(input,+len,+pad){
++++input+=+input.toString();+
++++if(input.length+>=+len)+return+input;
++++else{
++++++pad+=+(pad+%7C%7C+0).toString();+
++++++return+new+Array(1+%2B+len+-+input.length).join(pad)+%2B+input;
++++}
++};
});|60885|这使您可以执行以下标准：|60886|{{+22+%7C+minLength:4+}}+//Returns+"0022"|60887|但也提供了添加非零填充选项的选项，如：|60888|{{+22+%7C+minLength:4:"-"+}}+//Returns+"--22"|60889|你可以用数字或字符串来实现一些奇怪的东西，比如：|60890|{{+"aa"+%7C+minLength:4:"&nbsp;"+}}+//Returns+"++aa"|60891|另外，如果输入的长度已经超过了你想要的长度，过滤器就会在没有任何修剪的情况下将其弹出：|60892|{{+1234567+%7C+minLength:4+}}+//Returns+"1234567"|60893|您还可以避免为len添加验证，因为当您在不带len参数的情况下调用过滤器时，angular将在控制台中尝试创建长度为null的数组的行抛出一个RangeError，以简化调试。|offset|length|style|CODE|60894|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|7|3|M|3|1M|4|1Z|A|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1G|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|1Q|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|15|5|D|7|1S|8|@]|9|@]|A|$E|F]]|$1|16|3|17|5|6|7|1T|8|@$18|1U|19|1V|1A|1B]|$18|1W|19|1X|1A|1B]|$18|1Y|19|1Z|1A|1B]|$18|20|19|21|1A|1B]]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|1D|$]]

If you are dealing exclusively with "0" padding and don't mind tailoring your filters by use case, I'd go with something similar to Endless's answer for speed but would recommend you make sure the number isn't already long enough with something like:

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

As this will not only save it from trimming numbers or strings that already satisfy the minimum length which is important to avoid weird stuff like:

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

But by using "000000" instead of a number like 1e6 you avoid both changing the actual value of the input (by not adding 1000000 to it) and avoid the need to implicitly convert the number to a string thereby saving a computational step considering the input would already be a converted to a string to avoid the clipping issue mentioned above.

If you want a system that doesn't need any use-case testing that's both faster and more flexible than bguiz's solution I use a filter like:

<pre><code>app.filter('minLength', function(){
 return function(input, len, pad){
 input = input.toString(); 
 if(input.length &gt;= len) return input;
 else{
 pad = (pad || 0).toString(); 
 return new Array(1 + len - input.length).join(pad) + input;
 }
 };
});
</code></pre>

This allows you to do the standard:

<pre><code>{{ 22 | minLength:4 }} //Returns "0022"
</code></pre>

But also gives you the option to add non-zero padding options like:

<pre><code>{{ 22 | minLength:4:"-" }} //Returns "--22"
</code></pre>

and you can enforce wacky stuff with numbers or strings like:

<pre><code>{{ "aa" | minLength:4:"&amp;nbsp;" }} //Returns " aa"
</code></pre>

Plus, if the input is already longer than your desired length, the filter will just pop it back out without any trimming:

<pre><code>{{ 1234567 | minLength:4 }} //Returns "1234567"
</code></pre>

You also avoid the need to add validation for <code>len</code> because when you call the filter without a <code>len</code> argument, angular will throw a <code>RangeError</code> in your console at the line where you try to create an array of length <code>null</code> making it simple to debug.

blocks|key|277257|text|最干净的方法是在angular中创建自己的过滤器并使用它。对于这个问题，已经有一些答案，但我个人认为这是最容易阅读的。根据所需的零长度创建一个数组，然后用零连接该数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277258|myApp.filter('customNumber',+function(){
++++return+function(input,+size)+{
++++++++var+zero+=+(size+?+size+:+4)+-+input.toString().length+%2B+1;
++++++++return+Array(%2B(zero+>+0+&&+zero)).join("0")+%2B+input;
++++}
});|code-block|syntax|javascript|277259|像这样使用它：|277260|{{myValue+%7C+customNumber}}|277261|我也这样做了，这样您就可以将前导零指定为参数：|277262|{{myValue+%7C+customNumber:5}}|277263|演示：http://www.bootply.com/d7SbUz57o8|offset|length|277264|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootply.com/d7SbUz57o8^0|0|0|0|0|0|0|3|X|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

The cleanest would be to create your own filter in angular and use it. There's already a few answers for this but personally I find this easiest to read. Create a array by the length of zeros needed then join the array with zero.

<pre><code>myApp.filter('customNumber', function(){
 return function(input, size) {
 var zero = (size ? size : 4) - input.toString().length + 1;
 return Array(+(zero &gt; 0 &amp;&amp; zero)).join("0") + input;
 }
});
</code></pre>

Use it like:

<pre><code>{{myValue | customNumber}}
</code></pre>

I also made it so you can specify leading zeros as a parameter:

<pre><code>{{myValue | customNumber:5}}
</code></pre>

Demo:
<a href="http://www.bootply.com/d7SbUz57o8" rel="nofollow">http://www.bootply.com/d7SbUz57o8</a>

blocks|key|277301|text|不需要过滤器，只需在html中使用表达式即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277302|{{("00000"%2B1).slice(-6)}}++++++//+'000001'

{{("00000"%2B123456).slice(-6)}}+//+'123456'|code-block|syntax|javascript|277303|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

No filter required, Just use an expression in your html

<pre><code>{{("00000"+1).slice(-6)}} // '000001'

{{("00000"+123456).slice(-6)}} // '123456'
</code></pre>

blocks|key|277367|text|这是TypeScript中指令的Angular+1.x变体，可以处理整数和小数。多亏了TS，一切都被认为是“类型安全”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277368|adminApp.filter("zeroPadNumber",
++++()+=>+(num:+number,+len:+number):+string+=>+{
++++++++if+(isNaN(num)+%7C%7C+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+%2B+parts[1];+//+reappend+the+after+decimal
++++++++}+else+{
++++++++++++var+outInt+=+`${num}`;
++++++++++++while+(outInt.length+<+len)+{
++++++++++++++++outInt+=+`0${outInt}`;
++++++++++++}
++++++++++++return+outInt;
++++++++}
++++});|code-block|syntax|javascript|277369|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is an Angular 1.x variant of the directive in TypeScript which would handle both integers and decimals. Everything is considered 'type safe' thanks to TS.

<pre><code>adminApp.filter("zeroPadNumber",
 () =&gt; (num: number, len: number): string =&gt; {
 if (isNaN(num) || isNaN(len)) {
 return `${num}`;
 }
 if (`${num}`.indexOf(".") &gt; -1) {
 var parts = `${num}`.split(".");
 var outDec = parts[0]; // read the before decimal
 while (outDec.length &lt; len) {
 outDec = `0${outDec}`;
 }
 return outDec + parts[1]; // reappend the after decimal
 } else {
 var outInt = `${num}`;
 while (outInt.length &lt; len) {
 outInt = `0${outInt}`;
 }
 return outInt;
 }
 });
</code></pre>

blocks|key|61093|text|我将@bguiz's+answer扩展为能够处理数组，这是我在ng-options上使用过滤器的要求|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|61094|app.filter('numberFixedLen',+function+()+{
++return+function+(p,+len)+{
++++function+toFixedLength(n,+len)+{
++++++var+num+=+parseInt(n,+10);

++++++len+=+parseInt(len,+10);

++++++if+(isNaN(num)+%7C%7C+isNaN(len))+{
++++++++return+n;
++++++}

++++++num+=+''+%2B+num;

++++++while+(num.length+<+len)+{
++++++++num+=+'0'+%2B+num;
++++++}

++++++return+num;
++++}

++++if+(p.length)+{
++++++for+(var+i+=+0;+i+<+p.length;+i%2B%2B)+{
++++++++p[i]+=+toFixedLength(p[i],+len);
++++++}
++++}+else+{
++++++p+=+toFixedLength(p,+len);
++++}

++++return+p;
++};
});|code-block|syntax|javascript|61095|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/17648014/how-can-i-use-an-angularjs-filter-to-format-a-number-to-have-leading-zeros/48943202#17648547^0|V|A|2|8|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

I've extended <a href="https://stackoverflow.com/questions/17648014/how-can-i-use-an-angularjs-filter-to-format-a-number-to-have-leading-zeros/48943202#17648547">@bguiz's</a> answer to be able to handle arrays, which was my requirement for using the filter on <code>ng-options</code>:

<pre><code>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 &lt; len) {
 num = '0' + num;
 }

 return num;
 }

 if (p.length) {
 for (var i = 0; i &lt; p.length; i++) {
 p[i] = toFixedLength(p[i], len);
 }
 } else {
 p = toFixedLength(p, len);
 }

 return p;
 };
});
</code></pre>

I checked the <a href="http://docs-angularjs-org-dev.appspot.com/api/ng.filter:number" rel="noreferrer">documentation</a>. What I would like is for my numbers to have four digits and leading zeros. 

<pre><code>22 to 0022
1 to 0001
</code></pre>

Can someone help and tell me if this is possible with the number or another kind of filter?

How can I use an AngularJS filter to format a number to have leading zeros?

TypeScript

我查过了。我希望我的数字有四位数和前导零。22 to 00221  to 0001有没有人可以帮助我，告诉我这是不是可以通过数字或其他类型的过滤器实现？

问如何使用AngularJS筛选器将数字格式化为前导零？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用AngularJS筛选器将数字格式化为前导零？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用AngularJS筛选器将数字格式化为前导零？
EN