Question

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

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

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

Answer 1

您可以使用过滤器，如下面的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>

Answer 2

您可以使用Number的{{3}}方法。

((myValue/totalValue)*100).toFixed(2)

Answer 3

为此，我经常使用the built-in 'number' filter;

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

2位小数：

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

小数点后0;

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

Answer 4

使用在表达式解析之前不会显示花括号的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);
}

Answer 5

在你的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且value为10，则结果为30.使用内置Math.floor()函数的Javascript来舍入数字并删除小数。

Answer 6

You could use angular percent pipe for this.

Simplest solution in a single line within html using angular would be as follows :

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

if myvalue = 4 & totalvalue = 10, then result will be displayed as

40.00%

for respective html element.

html中的角度计算百分比

6 个答案: