Angular 如何在 <input> 中始终显示小数点后 4 位的数字答案

【问题标题】：Angular how to display number always with 4 decimal places in <input>Angular 如何在 <input> 中始终显示小数点后 4 位的数字
【发布时间】：2017-12-18 07:08:25
【问题描述】：

我希望在 <input>: 中始终以 4 位小数显示 ng-model 的浮点值

<input type="number" name="myDecimal"  ng-model="myDecimal | number : 4"  />

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以使用ng-currency 处理小数点。您可以使用分数来确定小数位数。默认为 2。

更多详情ng-currency

var app = angular.module('plunker', ['ng-currency']);

app.controller('ApplicationController', function($scope) {
  $scope.amount = 0.431264;
});

    <!doctype html>
    <html ng-app="plunker">
    <head>
      <meta charset="utf-8">
      <title>AngularJS Plunker</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-currency/1.2.3/ng-currency.js"></script>
      <script src="app.js"></script>
    </head>
    <body>
      <div class="container" ng-controller="ApplicationController">
          <div class="row">
            <input type="text" 
                   ng-model="amount"
                   currency-symbol=""
                   ng-currency 
                   fraction="4" />
          </div>
      </div>
    </body>
    </html>

【讨论】：

【解决方案2】：

您可以使用输入类型的value属性。

<input type="number" name="myDecimal"  ng-model="myDecimal" value="myDecimal | number : 4" />

【讨论】：

【解决方案3】：

由于 nonAssign 错误，您的代码将无法工作。你可以阅读更多关于它的信息here 和here。

您可以使用花括号表示法截断小数。 {{ myDecimal | number: 4 }}

请注意，number 过滤器不会真正截断小数位，而是将数字四舍五入到小数位。

简而言之，您不能按照您共享的代码使用type=number 和ng-model 中的过滤器。

如果你一定要使用数字类型，那么我建议在输入框之前将值四舍五入。

【讨论】：