13

角菜鸟在这里！我试图在我的 html 中显示一个百分比值，如下所示：

<td> {{ ((myvalue/totalvalue)*100) }}%</td>

它可以工作，但有时它会给出一个很长的小数，看起来很奇怪。如何将其四舍五入到小数点后两位？有更好的方法吗？

4

6 回答 6

29

您可以使用过滤器，如下面的jeffjohnson9046

过滤器假设输入为十进制形式（即 17% 为 0.17）。

myApp.filter('percentage', ['$filter', function ($filter) {
  return function (input, decimals) {
    return $filter('number')(input * 100, decimals) + '%';
  };
}]);

用法：

<tr ng-repeat="i in items">
   <td>{{i.statistic | percentage:2}}</td>
</tr>
于 2015-05-01T16:45:56.250 回答
24

可以使用的toFixed方法Number。

((myValue/totalValue)*100).toFixed(2)
于 2015-05-01T14:56:14.843 回答
7

为此，我经常使用内置的“数字”过滤器；

<span>{{myPercentage | number}}</span>

对于 2 位小数：

<span>{{myPercentage | number:2}}</span>

对于 0 小数；

<span>{{myPercentage | number:0}}</span>
于 2016-02-26T20:39:15.953 回答
2

在你的 controller.js (angular.js 1.x) 或 app.component.ts (angular2) 内部计算总值的百分比（逻辑）与另一个像这样的值。

this.percentage = Math.floor(this.myValue / this.value * 100);

然后在html中显示百分比。

<p>{{percentage}}%</p>

简单的数学示例：3/10*100 = 30%。如果myValue是 3 和value10，您的结果将是 30。使用 Javascript 的内置Math.floor()函数来舍入数字并删除小数点。

于 2017-07-31T18:38:55.903 回答
2

您可以为此使用角度 百分比管道。

在 html 中使用 angular 的单行中最简单的解决方案如下：

<td> {{ myvalue/totalvalue | percent:'2.0-2' }}</td>

如果 myvalue = 4 & totalvalue = 10，则结果将显示为

40.00%

对于相应的 html 元素。

于 2019-01-07T13:14:21.340 回答
1

使用在表达式解析之前不会显示花括号的 ng-bind。

html

<td ng-bind="roundedPercentage(myValue, totalValue) + '%'"></td>

控制器

$scope.roundedPercentage = function(myValue, totalValue){
   var result = ((myValue/totalValue)*100)
   return Math.round(result, 2);
}
于 2015-05-01T14:57:00.650 回答