AngularJS 필터를 사용하여 선행 0을 갖도록 숫자를 형식화 지불해야합니까?
나는 문서를 확인했다 . 내가 원하는 것은 내 숫자가 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 필터가있는 최소 코드 :
각도 높이 입력-> 각도 밑줄 키워드 필터-> 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각도는 RangeError-length 배열을 만들려고하는 줄에서 콘솔 에을 던져 null디버그를 간단하게 만들기 때문에 유효성 검사를 추가 할 필요가 없습니다 .
다음과 같은 순수한 JavaScript를 사용할 수 있습니다.
('00000'+refCounter).substr(-5,5)
0이 5 인 패딩의 경우 refCounter 값 .
참고 : refCounter 가 정의되지 않았는지 확인하십시오 . 예외가 발생합니다.
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>
또 다른 예 :
// 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) }}
'ProgramingTip' 카테고리의 다른 글
| 암호 입력을 위해 React Native에서 TextInput 스타일을 어떻게 지정합니까? (0) | 2020.12.02 |
|---|---|
| 목록에없는 요소 찾기 (0) | 2020.12.02 |
| Android : 두 번 탭을 감지하는 방법? (0) | 2020.12.02 |
| Windows 7에서 명령 프롬프트의 기본 시작 디렉터리 변경 (0) | 2020.12.02 |
| UISegmentedControl을 컨테이너보기에 프로그래밍 방식으로 추가하는 방법 (0) | 2020.12.02 |