javascript - 防止 input[type=number] 自动舍入浮点值

Question

有没有一种方法可以防止浮点值在用作输入 [type=number] 的值时被四舍五入。我不能根据要求使用任何其他类型。

例如，我无法绑定(bind)值为“3.00”的输入[type=number]，它会自动四舍五入为“3”。

我正在尝试使用 angularjs 绑定(bind)值。

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

那是因为 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>