如何在 Javascript/Angular JS 中四舍五入——但删除无关紧要的数字

Question

我的 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>

我希望数字四舍五入到小数点后两位。 但是，我希望在输出中只看到有效数字。我不想看到尾随零。 我该怎么做？使用 {{i | number:2}} 不会消除尾随零。

Answer 1

我会这样做：

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

并在您的控制器中：

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

Answer 2

您只需乘以 1 即可将其转换为真值。

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

如上述评论所述，解决方案将因 angular 数字过滤器的区域设置格式而中断。如果您需要区域设置格式和舍入，您可以创建一个扩展过滤器，它在下面使用 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>

Answer 3

由于其他答案并没有很好地工作，或者没有合并或使用 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+)$/, "")
        );
    }
})

将数字四舍五入到最大小数位数
修剪所有尾随零
删除不需要的小数点分隔符
和使用Angular的$locale格式

如何在 Javascript/Angular JS 中四舍五入——但删除无关紧要的数字

How to round in Javascript/Angular JS -- but remove insignificant digits

javascript

html

angularjs

angularjs-filter