Question

使用Angular.js v1.3.14，我在输入字段中显示和编辑小数字时遇到了麻烦。

我试图使用指令来阻止数字以科学记数法显示。例如：0.00000005而不是5e-8。

我从指令中收到一条错误消息，因为返回的数据类型是字符串而不是数字。

这是我收到的错误消息：Error: [ngModel:numfmt] Expected '0.00000005' to be a number

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <input type="number" ng-model="myNum" />
    <br/>
    <input decimal type="number" ng-model="myNum" />
</div>

JavaScript的：

angular
    .module('myApp', [])
    .controller('myCtrl', function($scope) {
        $scope.myNum = 0.00000005;
    })
    .directive('decimal', function()
    {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ngModelController) {

                ngModelController.$formatters.push(function(data) 
                {
                    var newData = data.toFixed != null ? data.toFixed(8) : data;

                    console.log('data', data, newData);
                    //convert data from model format to view format
                    return newData; //converted
                });

            }
        };
    });

jsFiddle：http://jsfiddle.net/joelnet/u277z929

注意：理想情况下，我更倾向于使用type =“number”而不是type =“text”作为输入字段。

如何强制输入字段仅显示十进制而不是科学记数法？

编辑：我更喜欢使用type =“number”的原因是因为（1）该字段是数字类型。（2）这会调出手机上的数字键盘。（3）我可以使用最小，最大字段。（4）$ scope。$ watch仅在数字有效时触发。（5）它更干净。

EDIT2：FireFox显示正确（并且不需要指令示例：http://jsfiddle.net/joelnet/u277z929/7），而Chrome和Internet Explorer将数字显示为科学记数法。两个输入字段都应将数字显示为十进制，而不是科学记数法。

Answer 1

input[number] specifically says的AngularJS文档：

模型必须始终为类型编号，否则Angular会抛出错误。请注意，包含数字的字符串是不够的。有关详细信息，请参阅numfmt错误文档以及必要时如何转换模型的示例。

您可以在numfmt error documentation上阅读更多信息。据我所知，在指定type="number"时无法做到这一点。必须通过$formatters数组的最后一项必须返回一个数字，而不是字符串。

如果您更改为type="text"，您的代码将正常运行：

<input decimal type="text" ng-model="myNum" />

您使用type=number的动机是什么？如果您只想允许数字输入，可以使用pattern或指令来创建该行为。

Answer 2

我担心您无法更改输入type="number"的显示格式。

有很多用于将科学记法格式化为javascript的库，但是你要做的是你必须创建一个指令。

使用两个输入，其中一个可见，显示非科学记数法并绑定到正常数字输入。我不知道这是否足够清洁以满足您的要求。 Here i made你是一个例子

Answer 3

根据您的小提琴，您可以拥有<input type="number">字段，通过进行以下更改验证0.00000005：

<input decimal type="number" ng-model="myNum" step="any" />

和

return Number(newData); //converted

请参阅：http://jsfiddle.net/u277z929/6/

Angular.js输入字段中的小数字和科学记数法的问题

3 个答案: