防止輸入[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>