Angular를 사용하는 방법선행 0을 가지도록 숫자를 포맷하는 JS 필터?

Angular를 사용하는 방법선행 0을 가지도록 숫자를 포맷하는 JS 필터?

서류를 확인했습니다.제가 원하는 것은 제 숫자가 4자리 숫자와 선행 0으로 되어 있는 것입니다.

22 to 0022
1  to 0001

번호나 다른 필터로 이것이 가능한지 누가 좀 도와주실 수 있나요?

필터는 필요 없습니다.html에 식을 사용합니다.

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

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

들어 '이 있다'라는 가정해 보겠습니다.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}}

최소로 유지...(문자열과 숫자 모두 사용 가능) 필요한 경우 검증을 수행합니다(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"

underscore.string 패딩 함수와 angular-underscore-string 필터가 있는 최소 코드:

jsFiddle에서의 작업 데모

---

angular string 입력 -> angular-underscore-string 필터 -> 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'] }}

"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

단, 1e6과 같은 숫자가 아닌 "000000"을 사용하면 입력의 실제 값을 변경할 필요가 없어집니다.또한 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"

또한 다음과 같은 0이 아닌 패딩 옵션을 추가할 수도 있습니다.

{{ 22 | minLength:4:"-" }} //Returns "--22"

숫자나 문자열로 이상한 걸 강요할 수 있어요

{{ "aa" | minLength:4:" " }} //Returns "  aa"

또한 입력이 이미 원하는 길이보다 길면 필터는 잘라내지 않고 다시 튀어나옵니다.

{{ 1234567 | minLength:4 }} //Returns "1234567"

또, 다음에 대해서 검증을 추가할 필요도 없습니다.len왜냐하면 필터에 전화할 때론len의론, 각이 있으면, angular는,RangeError콘솔의 길이 배열을 작성하려고 하는 행에서null쉽게 디버깅할 수 있습니다.

다음과 같은 순수 자바스크립트를 사용할 수 있습니다.

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

5개의 0이 있는 패딩의 경우 refCounter의 값입니다.

메모: refCounter가 정의되어 있지 않은지 확인하십시오.정의되지 않은 경우 예외가 발생합니다.

일부 수정에 필요한 경우 아래 필터를 사용하십시오.

  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>

또 다른 예는 다음과 같습니다.

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

가장 깨끗한 필터는 각도로 만들어 사용하는 것입니다.이에 대한 답은 이미 몇 개 있지만, 개인적으로 나는 이것이 읽기 쉽다고 생각합니다.필요한 0 길이로 배열을 만든 후 0으로 배열을 결합합니다.

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

선행 0을 파라미터로 지정할 수도 있습니다.

{{myValue | customNumber:5}}

데모: http://www.bootply.com/d7SbUz57o8

이것은 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;
        }
    });

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

코드 예:

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

언급URL : https://stackoverflow.com/questions/17648014/how-can-i-use-an-angularjs-filter-to-format-a-number-to-have-leading-zeros