angularjs directive change ngModel input type number format

Question

I'm trying to change the ngModel (input type="number") Format. This code work good in angularjs 1.2.23 version as you see, but in 1.6.4 version not work. any other solution?

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>

Marko Savic · Accepted Answer · 2017-10-15 22:20:37Z

2

Input with type number requires Number not a String.

In your example return value will be a String:

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

Use parseFloat(). The parseFloat() function parses an argument and returns a floating point number. In my approach i have used step attribute which increments value for 0.01.

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>

edited Oct 15, 2017 at 22:20

answered Oct 15, 2017 at 22:14

Marko Savic

2,4492 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ferhado Over a year ago

Thanks for your answer! The output when the no decimal must be 25,00 not 25. step=".01" work when decimal but not when no decimal.

Marko Savic Over a year ago

I know. Maybe someone else can resolve problem. Btw you can resolve it with input type text instead number.

Collectives™ on Stack Overflow

angularjs directive change ngModel input type number format

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related