Angular 计算 html 中的百分比

Question

Angular 菜鸟来了！我正在尝试在我的 html 中显示一个百分比值，如下所示：

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

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

Answer 1

可以使用Number的toFixed方法。

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

Answer 2

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

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

我经常为此目的使用 the built-in 'number' filter；

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

对于 2 位小数：

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

为0小数；

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

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。使用 Javascript 内置的 Math.floor() 函数来舍入数字并删除小数点。

Answer 6

您可以为此使用 angular percent 管道。

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

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

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

40.00%

对应 html 个元素。

Angular 计算 html 中的百分比

Angular calculate percentage in the html

javascript

number-formatting

angularjs

angularjs-interpolate