如何使用AngularJS过滤器格式化数字以具有前导零？

Question

我检查了文档.我想要的是我的数字有四位数和前导零.

22 to 0022
1  to 0001

有人可以帮助并告诉我这是否可以使用数字或其他类型的过滤器？

Answer 1

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

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

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

Answer 2

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

Answer 3

保持最小...(适用于字符串和数字)如果必须(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"

Answer 4

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

在jsFiddle工作演示

角度字符串输入 - > angular-underscore-string filter - > 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变量是指字符串库.在旧版本中,您可能必须将其替换为"_.str",即.{{ num | _.str: 'pad':[4, '0'] }}

Answer 5

如果你只使用"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从而使调试变得简单.

Answer 6

您可以使用纯JavaScript等

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

用于填充5个零值的refCounter值.

注意:请务必检查refCounter不是不确定的,否则你会得到一个异常.

Answer 7

如果需要进行某些修改，请使用以下过滤器修改

  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>