web-dev-qa-db-ja.com

Angular htmlのパーセンテージを計算

ここに角度のあるノブ！私は次のように私のHTMLにパーセント値を表示しようとしています：

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

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

javascriptangularjsnumber-formattingangularjs-interpolate
12
Abhishek

toFixedの-​​ Number メソッドを使用できます。

((myValue/totalValue)*100).toFixed(2)
18
Explosion Pills

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>
27
spik3s

私はよく 組み込みの 'number'フィルター を使用します。

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

小数2桁の場合：

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

0の10進数。

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

式が解決されるまで中括弧を表示しない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);
}
1
Pankaj Parkar

これにはangular percent pipeを使用できます。

angularを使用したHTML内の単一行での最も簡単なソリューションは、次のようになります。

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

myvalue = 4＆totalvalue = 10の場合、結果は次のように表示されます

40.00%

それぞれのhtml要素。

1
JEEVAN GEORGE ANTONY

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()関数を使用して、数値を丸めて小数部を削除します。

0
Ian Poston Framer