web-dev-qa-db-fra.com

Angular calculer le pourcentage dans le html

Noob angulaire ici! J'essaie d'afficher une valeur de pourcentage dans mon HTML comme suit:

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

Cela fonctionne mais parfois cela donne une très longue décimale qui a l’air bizarre. Comment puis-je l'arrondir à 2 chiffres après la décimale? Y a-t-il une meilleure approche à cela?

javascriptangularjsnumber-formattingangularjs-interpolate
11
Abhishek

Vous pouvez utiliser la méthode toFixed de Number.

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

Vous pouvez utiliser un filtre, comme celui ci-dessous de jeffjohnson9046

Le filtre suppose que l’entrée sera sous forme décimale (c’est-à-dire que 17% est égal à 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>
27
spik3s

J'utilise souvent le filtre "nombre" intégré pour cela;

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

Pour 2 décimales:

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

Pour 0 décimal; 

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

Utilisez ng-bind qui ne montrerait pas d'accolades jusqu'à la résolution de l'expression.

Html 

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

Manette 

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

Dans votre controller.js (angular.js 1.x) ou app.component.ts (angular2), calculez un pourcentage (logique) d'une valeur totale avec une autre valeur comme celle-ci.

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

Ensuite, affichez le pourcentage dans le code HTML.

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

Exemple de calcul simple: 3/10 * 100 = 30%. Si myValue est 3 et value est 10, votre résultat sera 30. Utilisez la fonction Javascript intégrée à Math.floor() pour arrondir le nombre et supprimer la décimale. 

0
Ian Poston Framer

Vous pouvez utiliser angular percent pipe pour cela.

La solution la plus simple dans une seule ligne au sein de HTML utilisant angular serait la suivante:

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

si myvalue = 4 & totalvalue = 10, alors le résultat sera affiché comme

40.00%

pour l'élément html respectif.

0
JEEVAN GEORGE ANTONY