Phần trăm tính toán góc trong html

Question

Góc noob ở đây! Tôi đang cố gắng hiển thị một giá trị phần trăm trong html của tôi như sau:

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

Nó hoạt động nhưng đôi khi nó mang lại một số thập phân rất dài có vẻ lạ. Làm thế nào để tôi làm tròn nó xuống 2 chữ số sau dấu thập phân? Có cách tiếp cận tốt hơn cho điều này?

Answer 1

Bạn có thể sử dụng phương thức toFixed của Number.

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

Answer 2

Sử dụng liên kết ng sẽ không hiển thị dấu ngoặc nhọn cho đến khi biểu thức được giải quyết.

Html

<td ng-bind="roundedPercentage(myValue, totalValue) + '%'"></td> 

khiển

$scope.roundedPercentage = function(myValue, totalValue){ 
    var result = ((myValue/totalValue)*100) 
    return Math.round(result, 2); 
} 

Answer 3

Bạn có thể sử dụng một bộ lọc, như thế này dưới đây bởi jeffjohnson9046

Bộ lọc làm cho các giả định rằng các đầu vào sẽ được ở dạng thập phân (nghĩa là 17% là 0,17).

myApp.filter('percentage', ['$filter', function ($filter) { 
    return function (input, decimals) { 
    return $filter('number')(input * 100, decimals) + '%'; 
    }; 
}]); 

Cách sử dụng:

<tr ng-repeat="i in items"> 
    <td>{{i.statistic | percentage:2}}</td> 
</tr> 

Answer 4

Tôi thường sử dụng the built-in 'number' filter cho mục đích đó;

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

Đối với 2 số thập phân:

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

Đối với 0 thập phân;

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

Answer 5

Bên trong controller.js (angular.js 1.x) hoặc app.component.ts (angular2) tính phần trăm (logic) của tổng giá trị với một giá trị khác như thế này.

this.percentage = Math.floor(this.myValue/this.value * 100); 

Sau đó hiển thị phần trăm trong html.

<p>{{percentage}}%</p> 

Ví dụ đơn giản: 3/10 * 100 = 30%. Nếu myValue là 3 và value là 10 kết quả của bạn sẽ là 30. Sử dụng chức năng Math.floor() được tích hợp sẵn của Javascript để làm tròn số và xóa số thập phân.