Javascript 角度计算html中的百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29989200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular calculate percentage in the html
提问by Abhishek
Angular noob here! I am trying to display a percentage value in my html as follows:
这里有角菜鸟！我试图在我的 html 中显示一个百分比值，如下所示：
<td> {{ ((myvalue/totalvalue)*100) }}%</td>
It works but sometimes it gives a very long decimal which looks weird. How do i round it off to 2 digits after the decimal? Is there a better approach to this?
它有效，但有时它会给出一个很长的小数，这看起来很奇怪。如何将其四舍五入到小数点后的 2 位数字？有没有更好的方法来解决这个问题？
回答by spik3s
You could use a filter, like this one below by jeffjohnson9046
您可以使用过滤器，如下面的jeffjohnson9046
The filter makes the assumption that the input will be in decimal form (i.e. 17% is 0.17).
过滤器假设输入将采用十进制形式（即 17% 为 0.17）。
myApp.filter('percentage', ['$filter', function ($filter) {
return function (input, decimals) {
return $filter('number')(input * 100, decimals) + '%';
};
}]);
Usage:
用法：
<tr ng-repeat="i in items">
<td>{{i.statistic | percentage:2}}</td>
</tr>
回答by Explosion Pills
回答by Andrew
I often use the built-in 'number' filterfor that purpose;
为此，我经常使用内置的“数字”过滤器；
<span>{{myPercentage | number}}</span>
For 2 decimals:
对于 2 位小数：
<span>{{myPercentage | number:2}}</span>
For 0 decimal;
为 0 小数；
<span>{{myPercentage | number:0}}</span>
回答by Pankaj Parkar
Use ng-bind that would not show curly braces until the expression resolved.
使用在表达式解析之前不会显示花括号的 ng-bind。
Html
html
<td ng-bind="roundedPercentage(myValue, totalValue) + '%'"></td>
Controller
控制器
$scope.roundedPercentage = function(myValue, totalValue){
var result = ((myValue/totalValue)*100)
return Math.round(result, 2);
}
回答by JEEVAN GEORGE ANTONY
You could use angular percent pipe for this.
您可以为此使用角度 百分比管道。
Simplest solution in a single line within html using angular would be as follows :
使用 angular 在 html 中的单行中最简单的解决方案如下：
<td> {{ myvalue/totalvalue | percent:'2.0-2' }}</td>
if myvalue = 4 & totalvalue = 10, then result will be displayed as
如果 myvalue = 4 & totalvalue = 10，则结果将显示为
40.00%
for respective html element.
对于相应的 html 元素。
回答by Ian Poston Framer
Inside your controller.js (angular.js 1.x) or app.component.ts (angular2) calculate a percentage (logic) of a total value with a another value like this.
在你的 controller.js (angular.js 1.x) 或 app.component.ts (angular2) 中，计算一个总值的百分比（逻辑）和另一个像这样的值。
this.percentage = Math.floor(this.myValue / this.value * 100);
Then show the percentage in the html.
然后在html中显示百分比。
<p>{{percentage}}%</p>
Simple Math Example: 3/10*100 = 30%. If myValueis 3 and valueis 10 your result will be 30. Use Javascript's built in Math.floor()function to round the number and remove the decimal.
简单数学示例：3/10*100 = 30%。如果myValue是 3 并且value是 10 ，则结果将是 30。使用 Javascript 的内置Math.floor()函数对数字进行四舍五入并删除小数。
