Как я могу использовать фильтр AngularJS для форматирования числа с ведущими нулями?

Ответ 1

Не требуется фильтра, просто используйте выражение в html

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

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

Ответ 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}}

Ответ 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))

Ответ 4

Минимальный код с underscore.string дополнением и angular -underscore-string filter:

рабочая демонстрация в jsFiddle

angular string input → 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'] }}

Ответ 5

Если вы имеете дело исключительно с отступом "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 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, что упрощает отладку.

Ответ 6

Вы можете просто использовать чистый JavaScript, например

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

для заполнения с 5 нулями значение refCounter.

ПРИМЕЧАНИЕ. Убедитесь, что refCounter не undefined, в противном случае вы получите исключение.

Ответ 7

Pls использует фильтр ниже, если требуется для некоторых модификаций

  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>

Ответ 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;
  };
});

Ответ 9

Самый чистый - создать собственный фильтр в 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}}

Демо: http://www.bootply.com/d7SbUz57o8

Ответ 10

Это Angular 1.x вариант директивы в TypeScript, который обрабатывал бы целые и десятичные числа. Благодаря 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;
        }
    });

Ответ 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;
  };
});

Ответ 12

Пример кода:

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