web-dev-qa-db-fra.com

Comment arrondir en Javascript/JS angulaire - mais en supprimant les chiffres non significatifs

J'ai la déclaration suivante dans mon contrôleur Javascript:

$scope.myList = [0, 1, 0.5, 0.6666666];

Mon modèle AngularJS comprend les éléments suivants:

<div ng-repeat="i in myList">{{i}}</div>

Cela produit la sortie HTML suivante:

<div>0</div>
<div>1</div>
<div>0.5</div>
<div>0.6666666</div>

Cependant, je veux que les nombres soient arrondis à deux décimales. Cependant, je voudrais ne voir que des chiffres significatifs dans la sortie. Je ne veux pas voir des zéros à la fin. Comment fait-on ça? Utiliser {{i | number:2}} n'élimine pas les zéros à la fin.

javascripthtmlangularjsangularjs-filter
16
Saqib Ali

Vous pouvez simplement multiplier par 1 pour le convertir en valeur réelle.

<div ng-repeat="i in myList">{{(i | number:2)*1}}</div>

Comme indiqué dans les commentaires ci-dessus, la solution se dissociera en raison de la mise en forme des paramètres régionaux par le filtre du nombre angulaire. Si vous avez besoin de mettre en forme et d'arrondir les paramètres régionaux, vous pouvez créer un filtre d'extension qui utilise le service number filter et $locale.

.filter('numberEx', ['numberFilter', '$locale',
  function(number, $locale) {

    var formats = $locale.NUMBER_FORMATS;
    return function(input, fractionSize) {
      //Get formatted value
      var formattedValue = number(input, fractionSize);

      //get the decimalSepPosition
      var decimalIdx = formattedValue.indexOf(formats.DECIMAL_SEP);

      //If no decimal just return
      if (decimalIdx == -1) return formattedValue;


      var whole = formattedValue.substring(0, decimalIdx);
      var decimal = (Number(formattedValue.substring(decimalIdx)) || "").toString();

      return whole +  decimal.substring(1);
    };
  }
]);

Et utilisez-le comme:

  <div ng-repeat="i in myList">{{i | numberEx:2}}</div>

Démo 

angular.module('app', []).controller('ctrl', function($scope) {

  $scope.myList = [0, 10000.56, 0.5, 0.6666666, -1000.23123, 1, 1002, 2.5, 30.5, 22];

}).filter('numberEx', ['numberFilter', '$locale',
  function(number, $locale) {

    var formats = $locale.NUMBER_FORMATS;
    return function(input, fractionSize) {
      //Get formatted value
      var formattedValue = number(input, fractionSize);

      //get the decimalSepPosition
      var decimalIdx = formattedValue.indexOf(formats.DECIMAL_SEP);
      
      //If no decimal just return
      if (decimalIdx == -1) return formattedValue;

 
      var whole = formattedValue.substring(0, decimalIdx);
      var decimal = (Number(formattedValue.substring(decimalIdx)) || "").toString();
      
      return whole +  decimal.substring(1);
    };
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="i in myList">{{i | numberEx:2}}</div>
</div>

21
PSL

Je le ferais comme ça:

<div ng-repeat="i in myList">{{formatNumber(i)}}</div>

et dans votre contrôleur:

$scope.formatNumber = function(i) {
    return Math.round(i * 100)/100; 
}
13
inorganik

Comme les autres réponses ne fonctionnaient pas vraiment bien ou n'incorporaient pas ou ne fonctionnaient pas avec le service $ locale de Angular, j'ai écrit la variable filter suivante:

Modèle: 

<span>{{yourNumber | roundTo: N}}</span>

Filtre: 

app.filter('roundTo', function(numberFilter) {
    return function(value, maxDecimals) {
        return numberFilter((value || 0)
            .toFixed(maxDecimals)
            .replace(/(?:\.0+|(\.\d+?)0+)$/, "$1")
        );
    }
})

  • Arrondit le nombre au nombre maximum de décimales

  • Coupe tous les zéros en queue

  • Supprime le séparateur décimal lorsqu'il n'est pas nécessaire

  • And Utilise le format $ locale de Angular

0
Jeffrey Roosendaal