javascript - 如何使用 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"

---

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

// app.filter('numberFixedLen', () => (a, b) => ("" + a).padStart(b, 0))

console.log("1234567".padStart(4, 0)) // "1234567"
console.log("1234567".padStart(9, 0)) // "001234567"

Answer 4

具有underscore.string的填充功能和angular-underscore-string 过滤器的最小代码：

jsFiddle 中的工作演示

---

角字符串输入 -> 角下划线字符串过滤器 -> 下划线.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在您尝试创建长度数组的行中的控制台中抛出 a，null从而使其易于调试。

Answer 6

您可以只使用纯 JavaScript，例如

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

用 5 个零填充refCounter的值。

注意：确保检查refCounter不是undefined，否则会出现异常。

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>

Answer 8

另一个例子：

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

Answer 9

最干净的方法是创建自己的角度过滤器并使用它。已经有一些答案，但我个人觉得这很容易阅读。通过所需的零长度创建一个数组，然后用零连接数组。

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

Answer 10

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

Answer 11

我已经扩展了@bguiz 的答案，以便能够处理数组，这是我对使用过滤器的要求ng-options：

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

Answer 12

示例代码：

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