반응형
Javascript/Angular JS에서 반올림하는 방법 -- 그러나 중요하지 않은 숫자를 제거하는 방법
자바스크립트 컨트롤러에 다음과 같은 문구가 있습니다.
$scope.myList = [0, 1, 0.5, 0.6666666];
마이 앵글JS 템플릿에는 다음 행이 포함됩니다.
<div ng-repeat="i in myList">{{i}}</div>
이렇게 하면 다음과 같은 HTML 출력이 생성됩니다.
<div>0</div>
<div>1</div>
<div>0.5</div>
<div>0.6666666</div>
숫자를 소수점 2자리로 반올림하고 싶습니다.하지만, 저는 출력에서 의미 있는 숫자만 보고 싶습니다. 뒷걸음질 치는 0을 보고 싶지 않습니다.제가 그걸 어떻게 합니까?사용.{{i | number:2}}
후행 0을 제거하지는 않습니다.
1을 곱하면 참값으로 변환할 수 있습니다.
<div ng-repeat="i in myList">{{(i | number:2)*1}}</div>
위의 의견에서 언급한 바와 같이 각 숫자 필터에 의한 로케일 포맷으로 인해 솔루션이 중단됩니다.로케일 서식 및 반올림이 필요한 경우 아래에서 다음을 사용하는 확장 필터를 생성할 수 있습니다.number filter
그리고.$locale
서비스.
.filter('numberEx', ['numberFilter', '$locale',
function(number, $locale) {
var formats = $locale.NUMBER_FORMATS;
return function(input, fractionSize) {
//Get formatted value
var formattedValue = number(input, fractionSize);
//get the decimalSepPosition
var decimalIdx = formattedValue.indexOf(formats.DECIMAL_SEP);
//If no decimal just return
if (decimalIdx == -1) return formattedValue;
var whole = formattedValue.substring(0, decimalIdx);
var decimal = (Number(formattedValue.substring(decimalIdx)) || "").toString();
return whole + decimal.substring(1);
};
}
]);
다음과 같이 사용할 수 있습니다.
<div ng-repeat="i in myList">{{i | numberEx:2}}</div>
데모
angular.module('app', []).controller('ctrl', function($scope) {
$scope.myList = [0, 10000.56, 0.5, 0.6666666, -1000.23123, 1, 1002, 2.5, 30.5, 22];
}).filter('numberEx', ['numberFilter', '$locale',
function(number, $locale) {
var formats = $locale.NUMBER_FORMATS;
return function(input, fractionSize) {
//Get formatted value
var formattedValue = number(input, fractionSize);
//get the decimalSepPosition
var decimalIdx = formattedValue.indexOf(formats.DECIMAL_SEP);
//If no decimal just return
if (decimalIdx == -1) return formattedValue;
var whole = formattedValue.substring(0, decimalIdx);
var decimal = (Number(formattedValue.substring(decimalIdx)) || "").toString();
return whole + decimal.substring(1);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="i in myList">{{i | numberEx:2}}</div>
</div>
저는 이렇게 하겠습니다.
<div ng-repeat="i in myList">{{formatNumber(i)}}</div>
컨트롤러에 저장할 수 있습니다.
$scope.formatNumber = function(i) {
return Math.round(i * 100)/100;
}
다른 답변들이 제대로 작동하지 않거나, Angular의 $locale 서비스를 통합하거나 연동하지 않았기 때문에 다음과 같이 적었습니다.filter
:
템플릿:
<span>{{yourNumber | roundTo: N}}</span>
필터:
app.filter('roundTo', function(numberFilter) {
return function(value, maxDecimals) {
return numberFilter((value || 0)
.toFixed(maxDecimals)
.replace(/(?:\.0+|(\.\d+?)0+)$/, "$1")
);
}
})
숫자를 최대 소수점 숫자로 반올림합니다.
모든 트림이 0보다 뒤집니다.
필요 없을 때 소수점 구분자를 제거합니다.
Angular의 $locale 형식을 사용합니다.
언급URL : https://stackoverflow.com/questions/27850765/how-to-round-in-javascript-angular-js-but-remove-insignificant-digits
반응형
'programing' 카테고리의 다른 글
Swift에서 UIViewController 하위 클래스의 사용자 지정 이니셜라이저를 만드는 방법은 무엇입니까? (0) | 2023.11.05 |
---|---|
ForEach-Object - Parallel에서 사용자 지정 함수를 전달하는 방법 (0) | 2023.11.05 |
$(이것은) AJAX 성공 내부에서 작동하지 않음 (0) | 2023.11.05 |
MariaDB Community Server 10.5 Alpha의 MariaDB Columnstore 1.4 (0) | 2023.11.05 |
WordPress admin: 페이지 속성에 초안 페이지 표시 부모 페이지 드롭다운 (0) | 2023.11.05 |