web-dev-qa-db-ja.com

Javascript / Angular JSで丸める方法-ただし、重要でない数字を削除する

Javascriptコントローラーに次のステートメントがあります。

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

私のAngularJSテンプレートには次の行が含まれています：

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

これにより、次のHTML出力が生成されます。

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

数値を小数点以下2桁に丸めたい。 ただし、出力には有効数字のみを表示したい。末尾のゼロを表示したくない。どうすればよいですか？ {{i | number:2}}を使用しても、末尾のゼロは削除されません。

javascripthtmlangularjsangularjs-filter
18
Saqib Ali

1倍するだけで真の値に変換できます。

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

上記のコメントからわかるように、ソリューションはangular numberフィルターによるロケールの書式設定により壊れます。ロケールの書式設定と丸めが必要な場合は、number filterを使用する拡張フィルターを作成できます。および$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);
    };
  }
]);

そしてそれを次のように使用します：

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

デモ

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>
24
PSL

私はこのようにします：

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

そしてあなたのコントローラーで：

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

他の答えは実際にはうまくいかなかった、またはAngularの$ localeサービスを組み込んでいない、またはAngularの$ localeサービスと連携していなかったので、次のfilterを書いた：

テンプレート：

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

フィルター：

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

  • 数値を小数点以下の最大数に丸めます

  • 末尾のゼロをすべてトリムします

  • 小数点が不要な場合は小数点を削除します

  • そしてAngularの$ localeフォーマットを使用

1
Jeffrey Roosendaal