数字过滤器将数字过滤到小数点后两位，但不以这种方式显示答案

【问题标题】：Number filter filters number down to two decimals, but does not display it that way数字过滤器将数字过滤到小数点后两位，但不以这种方式显示
【发布时间】：2015-06-10 15:07:34
【问题描述】：

这是我看到的：

值设置为160.90，但显示为160.8999999999等。

<input class="form-control" ng-model="imprint.total" 
    value="{{imprint.total | number:2}}" readonly>

它通过过滤某些输入来获得总数，但本质上它只是价格乘以数量。

【问题讨论】：

ng-model 将覆盖值。您将不得不使用解析器/格式化程序。如果它是只读的，您可以删除 ng-model，<input class="form-control" value="{{imprint | number:2}}" readonly>

标签： angularjs angularjs-filter

【解决方案1】：

value 属性中的值将被ng-model 指令覆盖，当它在渲染时设置视图值。您有一个只读文本框，您也可以从中删除 ng-model。

<input class="form-control" 
       value="{{imprint.total | number:2}}" readonly>

使用ng-model 并格式化实时数据输入，您需要创建一个指令并使用parsers/formatters 来格式化值。

angular.module('app', []).directive('format', ['numberFilter',
  function(numberFilter) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, elm, attr, ngModel) {
        var decPlaces = attr.format || 2;

        function formatter(value) {

          if (value) {
            return numberFilter(value, decPlaces);
          }
        }

        ngModel.$formatters.push(formatter);

      }
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="imprint=164.899999">
  <input class="form-control" value="{{imprint | number:2}}" readonly>

  <input class="form-control" ng-model="imprint" format="2" readonly>

</div>

【讨论】：

【解决方案2】：

使用自定义过滤器，使用toFixed方法会限制十进制值的个数，

App.filter('twoDecimal',function(input, scope){

return function(){

   return input.toFixed(2);

  }

})

【讨论】：

【解决方案3】：

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = { name: ''};
});
app.directive('twoDecimal', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      
      ngModel.$formatters.push(function(value) {debugger
        return Math.round(value * 100) / 100;
      });
      
    }
  }
});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="app.js"></script>
  </head>

  <body  ng-app="app">
    <div ng-controller="MainCtrl">
    <input type="button" value="set to '12.23453'" ng-click="data.name='12.23453'"/>
    <input type="button" value="set to '34.3333'" ng-click="data.name='34.3333'"/>
    <input two-decimal ng-model="data.name" />
    <pre>model is: {{data.name}}</pre>
    </div>
  </body>

</html>

【讨论】：