自定義指令更改輸入類型數字格式，當沒有小數

Question

我試圖改變ngModel（input type =「number」）格式。 When there is no decimal the Output must be: 25,00。如您所見，此代碼在angularjs 1.2.23版本中運行良好，但在1.6.4版本中不起作用。其他解決方案？

var app= angular.module('myApp',[]); 
 
app.controller('myCtrl',function($scope){ 
 
    $scope.test=25; 
 
}) 
 

 
.directive('price', function($filter) { 
 
    return { 
 
     restrict: 'A', 
 
     require: '?ngModel', 
 
     link: function(scope, element, attrs, ngModel) { 
 
      ngModel.$formatters.push(function (value) { 
 
       return $filter('number')(value,2); 
 
      }); 
 
     } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <input type="number" ng-model="test" step=".01" price> 
 
</div>

Answer 1

從AngularJS 1.3（db044c40）開始，當輸入不是數字，這是您的情況下，由於數過濾器返回一個字符串的類型input[number]拋出一個驗證錯誤。

如果使用Number(...)或parseFloat它轉換成一個數字，你就會陷入一個Javascript限制浮點數，其中最右邊的零被刪除，輸入將顯示值25而不是25.00。

由於此驗證is also in the $formatters array一個簡單的解決方法是將您的自定義格式時使用unshift代替push，這將允許它後運行驗證：如果您的格式需求

.directive('price', function($filter) { 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      ngModel.$formatters.unshift(function (value) { 
       return $filter('number')(value,2); 
      }); 
     } 
    } 
}) 

當然，要做一些額外的工作，您總是可以使用push來處理無效輸入，另一個可以通過調用.toFixed(2)來增加小數位數。