wake-up-neo.com

Wie man mit Javascript/Angular JS rundet - aber unbedeutende Ziffern entfernt

Ich habe in meinem Javascript-Controller die folgende Anweisung:

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

Meine AngularJS-Vorlage enthält Folgendes:

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

Dies erzeugt die folgende HTML-Ausgabe:

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

Ich möchte jedoch, dass die Zahlen auf 2 Dezimalstellen gerundet werden. Ich möchte jedoch nur signifikante Ziffern in der Ausgabe sehen. Ich möchte keine nachgestellten Nullen sehen. Wie mache ich es? Durch die Verwendung von {{i | number:2}} werden nachfolgende Nullen nicht beseitigt.

16
Saqib Ali

Sie können einfach mit 1 multiplizieren, um den Wert in einen echten Wert umzuwandeln.

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

Wie aus den obigen Kommentaren hervorgeht, wird die Lösung aufgrund der Formatierung des Gebietsschemas durch den Winkelnummernfilter beschädigt. Wenn Sie die Formatierung und Rundung des Gebietsschemas benötigen, können Sie einen Erweiterungsfilter erstellen, der darunter den Dienst number filter und $locale verwendet.

.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);
    };
  }
]);

Und benutze es als:

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

Demo

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

Ich würde es so machen:

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

und in Ihrem Controller:

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

Da die anderen Antworten nicht wirklich gut funktionierten oder nicht mit Angulars $ locale-Service zusammenarbeiteten oder mit diesem zusammenarbeiteten, schrieb ich die folgende filter:

Vorlage:

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

Filter:

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

  • Rundet die Anzahl auf die maximale Anzahl von Dezimalstellen

  • Stellt alle folgenden Nullen ein

  • Entfernt den Dezimaltrenner, wenn er nicht benötigt wird

  • Und Verwendet die $ locale-Formatierung von Angular

0