如何在 Javascript/Angular JS 中四舍五入——但删除无关紧要的数字 [英] How to round in Javascript/Angular JS -- but remove insignificant digits

问题描述

我的 Javascript 控制器中有以下语句:

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

我的 AngularJS 模板包含以下行:

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

这会产生以下 HTML 输出:

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

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

解决方案

您可以乘以 1 将其转换为真值.

{{(i | number:2)*1}}

正如上面的评论所指出的，由于角度数字过滤器的区域设置格式，解决方案将中断.如果您需要区域设置格式和四舍五入，您可以创建一个扩展过滤器，它在下面使用 number filter 和 $locale 服务.

.filter('numberEx', ['numberFilter', '$locale',功能(数字，$locale){var 格式 = $locale.NUMBER_FORMATS;返回函数(输入，分数大小){//获取格式化的值var formattedValue = number(input,fractionSize);//获取十进制SepPositionvar decimalIdx = formattedValue.indexOf(formats.DECIMAL_SEP);//如果没有小数就返回if (decimalIdx == -1) 返回 formattedValue;var Whole = formattedValue.substring(0, decimalIdx);var decimal = (Number(formattedValue.substring(decimalIdx)) || "").toString();返回整数 + 十进制.substring(1);};}]);

并将其用作:

 
{{i |numberEx:2}}

演示

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',功能(数字，$locale){var 格式 = $locale.NUMBER_FORMATS;返回函数(输入，分数大小){//获取格式化的值var formattedValue = number(input,fractionSize);//获取十进制SepPositionvar decimalIdx = formattedValue.indexOf(formats.DECIMAL_SEP);//如果没有小数就返回if (decimalIdx == -1) 返回 formattedValue;var Whole = formattedValue.substring(0, decimalIdx);var decimal = (Number(formattedValue.substring(decimalIdx)) || "").toString();返回整数 + 十进制.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}}

I have a the following statement in my Javascript controller:

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

My AngularJS template contains the following line:

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

This produces the following HTML output:

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

I want the numbers to be rounded to 2 decimal places. However, I would like to see only significant digits in the output. I don't want to see trailing zeroes. How do I do it? Using {{i | number:2}} doesn't eliminate trailing zeroes.

解决方案

You could just multiple by 1 to convert it to true value.

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

As noted from the comments above solution will break due to the locale formatting by angular number filter. If you need the locale formatting and rounding you could create an extension filter which underneath uses number filter and $locale service.

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

And use it as:

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

这篇关于如何在 Javascript/Angular JS 中四舍五入——但删除无关紧要的数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！