Javascript 如何使用AngularJS过滤器将数字格式化为前导零？

我检查了房间。我希望我的数字有四位数字和前导零

22 to 0022
1  to 0001

---

有人能帮我一下，告诉我这个号码或其他类型的过滤器是否可行吗？

如果需要修改，请使用下面的过滤器

  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>

app.filter（'customNo'，函数（）{
返回函数（输入）{
var n=输入；
返回值（n<10）'000'+n:'n<100）'00'+n:'n<1000）'0'+n:''+n；
}
});
{{number | customNo}}

假设您的应用程序中有一个名为

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

保持最低限度。。。（同时适用于字符串和数字）如果必须，请执行一些验证（isNumber，NaN）

如果您希望它更小，并且浏览器支持箭头功能，或者您正在使用babel/traceur，则可以将其缩减为：

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

html:

---

注意这种方法灵活性较低，仅适用于10000以下的数字，如果该数字较大，则必须同时增加

4

和

1e4

或使用任何其他动态解决方案。
这是为了尽可能少地快速执行

这与故意做的事情是一样的：

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

---

更新您也可以使用（但在IE中不起作用）

//app.filter（'numberFixedLen'，（）=>（a，b）=>（“”+a）.padStart（b，0））
console.log（“1234567.padStart（4,0））/“1234567”
console.log（“1234567.padStart（9，0））/“001234567”

另一个示例：

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

具有的函数和的最小代码：

---

角度字符串输入->角度下划线字符串过滤器->下划线.string

{{num|s:'pad'：[4，'0']}

angular.module（'app'，['下划线.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

变量引用字符串库。在旧版本中，您可能需要将其替换为“124;.str”，即，

{{num | 124;.str:'pad'：[4，'0']}

您可以使用纯JavaScript，例如

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

对于5个零的填充，refCounter的值

---

注意：确保检查refCounter是否未定义，否则会出现异常。

如果您只处理“0”填充，不介意根据用例定制过滤器，对于速度，我会采用类似于永无止境的答案，但建议您确保数字不够长，例如：

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将在控制台中尝试创建长度数组

null

的那一行抛出

RangeError

，以简化调试。

最干净的方法是在angular中创建自己的过滤器并使用它。关于这个问题已经有了一些答案，但我个人认为这是最容易阅读的。按所需的零长度创建一个数组，然后用零连接该数组

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

演示：

---

无需筛选，只需在html中使用表达式即可

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

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

---

这是TypeScript中指令的角度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;
        }
    });

adminApp.filter（“zeroPadNumber”，
（）=>（num:number，len:number）：字符串=>{
if（isNaN（num）| isNaN（len））{
返回`${num}`；
}
if（`${num}`.indexOf（“.”>-1）{
var parts=`${num}`.split（“.”）；
var outDec=parts[0]；//读取小数点之前的值
而（外径长度<长度）{
outDec=`0${outDec}`；
}
return outDec+parts[1]；//在小数点后重新结束
}否则{
var outInt=`${num}`；
while（输出长度

示例代码：

{{ (value > 9 ? (value > 99 ? (value > 999 ? value : '0'+value) : '00'+value) : '000'+value) }}

我将答案扩展为能够处理数组，这是我在

ng选项上使用过滤器的要求：

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

app.filter（'numberFixedLen'，函数（）{
返回函数（p，len）{
固定长度函数（n，len）{
var num=parseInt（n，10）；
len=parseInt（len，10）；
if（isNaN（num）| isNaN（len））{
返回n；
}
num=''+num；
while（num.lengthadminApp.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;
        }
    });

{{ (value > 9 ? (value > 99 ? (value > 999 ? value : '0'+value) : '00'+value) : '000'+value) }}

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