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

Question

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

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

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

Answer 1

Вы можете использовать метод toFixedNumber.

((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(), чтобы округлить число и удалить десятичную.