2

I have a textbox and I want to show the value the user enters with 2 decimals, ex. if user entered 10, then I will show 10.00 in the text box.

<input type="number" class="form-control"/>

It's simple like this, I tried to use watch but am not sure about the method that am going to use in order to reach the required.

Do we have anyway to use currency filter inside a textbox input ?

Dev
  • 1,861
  • 2
  • 14
  • 20

2 Answers2

2

Try this:

<input type="number" step="0.01" ...>

The step attribute is actually for the amount of increment/decrement by up and down buttons but it also happens to set the resolution of the number to a certain number of digits after the decimal in floating point numbers.

Afaan Bilal
  • 333
  • 3
  • 15
  • I tried to apply it, but it's not showing the number I am adding as a fixed number, when I enter 10 I want it to display as 10.00 – Dev May 30 '15 at 13:54
  • – Dev May 30 '15 at 13:55
  • If you wish for it to appear as currency, take a look here: http://stackoverflow.com/questions/5963158/html5-form-input-pattern-currency-format – Afaan Bilal May 30 '15 at 14:00
0

Would a filter work? You might want to work in some kind of delay so that the form lets the user finish typing before converting the number, but this works (minus the delay):

    <!doctype html>
    <html ng-app="numFilterExample">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
            <script>
                angular.module('numFilterExample',[])
            .controller('NumberFilterController', ['$scope','numberFilter',function($scope,numFilter){
                $scope.change = function(){
                    $scope.num = numFilter($scope.num,2);
                };
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="NumberFilterController">
            <input ng-model='num' ng-change="change()" />
        </div>
    </body>
</html>
Lyndon
  • 106
  • 4