13

ここでAngular noob！次のように、html にパーセンテージ値を表示しようとしています。

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

それは機能しますが、奇妙に見える非常に長い小数を与えることがあります。小数点以下2桁に丸めるにはどうすればいいですか？これに対するより良いアプローチはありますか？

4

6 に答える 6

29

以下のjeffjohnson9046のようなフィルターを使用できます。

フィルタは、入力が 10 進数形式であると仮定します (つまり、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>

10 進数 0 の場合。

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

これには角度 パーセントパイプを使用できます。

angularを使用したhtml内の1行での最も簡単なソリューションは次のとおりです。

<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 に答える