首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用AngularJS筛选器将数字格式化为前导零?

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

Stack Overflow用户
提问于 2013-07-15 14:32:14
回答 8查看 88.3K关注 0票数 65

我查过documentation了。我希望我的数字有四位数和前导零。

代码语言:javascript
复制
22 to 0022
1  to 0001

有没有人可以帮助我,告诉我这是不是可以通过数字或其他类型的过滤器实现?

EN

回答 8

Stack Overflow用户

发布于 2015-06-19 00:27:31

不需要过滤器,只需在html中使用表达式即可

代码语言:javascript
复制
{{("00000"+1).slice(-6)}}      // '000001'

{{("00000"+123456).slice(-6)}} // '123456'
票数 109
EN

Stack Overflow用户

发布于 2013-07-15 15:09:43

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

代码语言:javascript
复制
angular.module('myApp', ['myModule']);

在此模块中定义您的过滤器:

代码语言:javascript
复制
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;
        };
    });

在标记中使用过滤器:

代码语言:javascript
复制
{{myValue | numberFixedLen:4}}
票数 64
EN

Stack Overflow用户

发布于 2015-03-14 01:01:13

如果您只处理"0“填充,并且不介意根据用例定制您的过滤器,我会使用类似于无尽的速度的答案,但建议您确保数字还不够长,如下所示:

代码语言:javascript
复制
app.filter('minLength', function () {
    return function(input,len){
        input = input.toString();
        if(input.length >= len) return input;
        else return("000000"+input).slice(-len);
    }
}); 

因为这不仅可以避免修剪已经满足最小长度的数字或字符串,这对于避免奇怪的事情很重要,比如:

代码语言:javascript
复制
{{ 0.23415336 | minLength:4 }} //Returns "0.23415336" instead of "5336" like in Endless's code

但是通过使用"000000“而不是像1e6这样的数字,您既避免了更改输入的实际值(通过不向其添加1000000 ),也避免了隐式地将数字转换为字符串的需要,从而节省了计算步骤,因为输入已经转换为字符串,从而避免了上面提到的裁剪问题。

如果你想要一个不需要任何用例测试的系统,它比bguiz的解决方案更快更灵活,我使用的过滤器如下:

代码语言:javascript
复制
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;
    }
  };
});

这使您可以执行以下标准:

代码语言:javascript
复制
{{ 22 | minLength:4 }} //Returns "0022"

但也提供了添加非零填充选项的选项,如:

代码语言:javascript
复制
{{ 22 | minLength:4:"-" }} //Returns "--22"

你可以用数字或字符串来实现一些奇怪的东西,比如:

代码语言:javascript
复制
{{ "aa" | minLength:4:"&nbsp;" }} //Returns "  aa"

另外,如果输入的长度已经超过了你想要的长度,过滤器就会在没有任何修剪的情况下将其弹出:

代码语言:javascript
复制
{{ 1234567 | minLength:4 }} //Returns "1234567"

您还可以避免为len添加验证,因为当您在不带len参数的情况下调用过滤器时,angular将在控制台中尝试创建长度为null的数组的行抛出一个RangeError,以简化调试。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17648014

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档