CODEWITHSUNDEEP
javascriptjqueryangularjsfilterangularjs-directive
bleedCoder
bleedCoder

Reputation: 369

How to display ng-model input value as currency in angular?

I'm having in html

<input type="text" ng-model="price" >

<h2>{{ price | currency}}</h2>

In controller

$scope.price = 10;   
Which displays   **$10** in h1 if i change the value in price model input.

I want the text box input to be in currency ($10 in input box as value). How to achieve this?

Upvotes: 8

Views: 22136

Answers (2)

MarceloBarbosa
MarceloBarbosa

Reputation: 915

For input I don't use ng-bind or ng-model, I always use ng-value instead.

<input type="text" ng-value="variable | currency:'US$ '" />

Upvotes: -3

Arun P Johny
Arun P Johny

Reputation: 388316

You can try using formatters and parsers like

app.directive('currency', function () {
    return {
        require: 'ngModel',
        link: function(elem, $scope, attrs, ngModel){
            ngModel.$formatters.push(function(val){
                return '$' + val
            });
            ngModel.$parsers.push(function(val){
                return val.replace(/^\$/, '')
            });
        }
    }
})

then

<input type="text" ng-model="price" currency>

Demo: Fiddle

Upvotes: 16

Related Questions