如何在 Javascript/Angular JS 中四舍五入——但删除无关紧要的数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27850765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to round in Javascript/Angular JS -- but remove insignificant digits
提问by Saqib Ali
I have a the following statement in my Javascript controller:
我的 Javascript 控制器中有以下语句：
$scope.myList = [0, 1, 0.5, 0.6666666];
My AngularJS template contains the following line:
我的 AngularJS 模板包含以下行：
<div ng-repeat="i in myList">{{i}}</div>
This produces the following HTML output:
这将产生以下 HTML 输出：
<div>0</div>
<div>1</div>
<div>0.5</div>
<div>0.6666666</div>
I want the numbers to be rounded to 2 decimal places. However, I would like to see only significant digits in the output. I don't want to see trailing zeroes.How do I do it? Using {{i | number:2}}doesn't eliminate trailing zeroes.
我希望数字四舍五入到小数点后两位。但是，我只想在输出中看到有效数字。我不想看到尾随零。我该怎么做？使用{{i | number:2}}不会消除尾随零。
回答by PSL
You could just multiple by 1 to convert it to true value.
您只需乘以 1 即可将其转换为真值。
<div ng-repeat="i in myList">{{(i | number:2)*1}}</div>
As noted from the comments above solution will break due to the locale formatting by angular number filter. If you need the locale formatting and rounding you could create an extension filter which underneath uses number filterand $localeservice.
正如上面的评论所指出的，由于角度数字过滤器的区域设置格式，解决方案将中断。如果您需要区域设置格式和四舍五入，您可以创建一个扩展过滤器，在下面使用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);
};
}
]);
And use it as:
并将其用作：
<div ng-repeat="i in myList">{{i | numberEx:2}}</div>
Demo
演示
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>回答by inorganik
I would do it like this:
我会这样做：
<div ng-repeat="i in myList">{{formatNumber(i)}}</div>
and in your controller:
并在您的控制器中：
$scope.formatNumber = function(i) {
return Math.round(i * 100)/100;
}
回答by Jeffrey Roosendaal
As the other answers didn't really work well, or did not not incorporate or work with Angular's $locale service, I wrote the following filter:
由于其他答案并没有真正奏效，或者没有与 Angular 的 $locale 服务合并或使用，我写了以下内容filter：
Template:
模板：
<span>{{yourNumber | roundTo: N}}</span>
Filter:
筛选：
app.filter('roundTo', function(numberFilter) {
return function(value, maxDecimals) {
return numberFilter((value || 0)
.toFixed(maxDecimals)
.replace(/(?:\.0+|(\.\d+?)0+)$/, "")
);
}
})
Rounds the number to the max number of decimals
Trims all trailing zero's
Removes the decimal seperator when it's not needed
And Uses Angular's $locale formatting
将数字四舍五入到最大小数位数
修剪所有尾随零
不需要时删除十进制分隔符
并使用 Angular 的 $locale 格式
