Угловой расчетный процент в html

Question

Угловой нуб здесь! Я пытаюсь отобразить процентное значение в моем HTML следующим образом:

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

Это работает, но иногда дает очень длинный десятичный знак, который выглядит странно. Как округлить его до 2 цифр после десятичной дроби? Есть ли лучший подход к этому?

Answer 1

Вы можете использовать toFixed метод Number,

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

Answer 2

Вы можете использовать фильтр, как этот ниже 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 3

Я часто использую встроенный "числовой" фильтр для этой цели;

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

Для 2 десятичных знаков:

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

Для 0 десятичных;

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

Answer 4

Внутри вашего 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 5

Вы можете использовать угловую трубу процентов для этого.

Простейшее решение в одной строке в html с использованием angular было бы следующим:

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

если myvalue = 4 & totalvalue = 10, то результат будет отображаться как

40.00%

для соответствующего элемента HTML.

Answer 6

Используйте 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);
}