防止输入[type = number]自动舍入浮点值

Question

有没有办法防止浮点值在作为输入值[type = number]时被四舍五入。按照要求我不能使用任何其他类型。

例如，我无法将输入[type = number]与值“3.00”绑定，它会自动舍入为“3”。

我想使用angularjs绑定值。

angular.module('app', []) 
.controller('controller1', ['$scope', function ($scope){ 
    $scope.value=3.00; 
}]); 

<div ng-app="app" ng-controller="controller1"> 
    <input type="number" ng-model="value" /><br/> 
    {{value}}<br/> 
</div> 

这是链接到PEN：http://codepen.io/cyrilpanicker/pen/aqucJ?editors=101

Answer 1

可以使用number过滤器来格式化数字时，你显示它。 {{value |编号：2}}将始终用2dp显示它：

<div ng-app="app" ng-controller="controller1"> 
    <input type="number" ng-model="value" /><br/> 
    {{value | number:2}}<br/> 
</div> 

Answer 2

这是因为ngModel在解析后四舍五入值。一种解决方法可能是使用低优先级的自定义指令（-1）而不是ngModel（它在优先级0上运行）处理它，以便它在ngModel解析后运行。并在指令中注册一个格式化程序，它将使用数字过滤器来重新格式化输入的模型值。

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.value=3.00; 
 
}).directive('formatNum', function(numberFilter){ 
 
    return { 
 
    priority:-1, //<-- Important 
 
    require:'ngModel', 
 
    link:function(scope, elm, attrs, ngModel){ 
 
     ngModel.$formatters.push(format); //Push a formatter 
 
     function format(){ 
 
      return numberFilter(ngModel.$modelValue , 2); //Round off to 2 dec 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller= "MainCtrl"> 
 
<input type="number" ng-model="value" format-num/><br/> 
 
    {{value | number:2}}<br/> 
 
</div>