angularjsディレクティブの変更ngModel入力タイプ番号のフォーマット

Question

ngModel（input type="number"）フォーマットを変更しようとしています。このコードはanglejs 1.2.23バージョンでうまく動作しますが、1.6.4では動作しません。他の解決策？

Output must be: 25,00 

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" price> 
 
</div>

Answer 1

InputタイプnumberとNumberないStringが必要です。

あなたの例では戻り値はString次のようになります。

ngModel.$formatters.push(function (value) { 
    return $filter('number')(value,2); 
}); 

使用parseFloat()。 parseFloat()関数は、引数を解析し、浮動小数点数を返します。私のアプローチでは、の値をインクリメントするstep属性を使用しています。

JSFiddle：あなたの答えのための

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 parseFloat(value); 
 
      }); 
 
     } 
 
    } 
 
})

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