CODEWITHSUNDEEP
javascriptangularjs
Mitch Evans
Mitch Evans

Reputation: 301

Dollars to Cents and back with Angular JS

I am trying to be able to type in a dollar amount (5.75) and have it convert to 575 and be stored in the database and then display as 5.75 on the site again.

What I have works for $5.00 but won't work for $5.75. What I have is below.

HTML

<input type="number" class="form-control" ng-model="admin.singleInfo.pricing.cost" monetary-input ng-change="admin.calculateSell(admin.singleInfo.$id); admin.singleInfo.$save();changesSaved()"/>

FILTER

.filter('MonetaryUnit', function () { 
    return function (amount) {
        return (amount / 100).toFixed(2); 
    } 
})

DIRECTIVE

directive('monetaryInput', function($filter, $browser) {
    return {
        require: 'ngModel',
        link: function($scope, $element, $attra, ngModelCtrl) {
            var listener = function() {
                $element.val($filter('MonetaryUnit')(value, false));
            };

            ngModelCtrl.$parsers.push(function(viewValue) {
                return Math.round(parseInt(viewValue) * 100);
            });

            ngModelCtrl.$render = function() {
                $element.val($filter('MonetaryUnit')(ngModelCtrl.$viewValue, false));
            }

            $element.bind('change', listener);
        }
    }
})

Upvotes: 3

Views: 1837

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

It's simple. Just change the parseInt to parseFloat. See the working example below:

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

});

app.filter('MonetaryUnit', function() {
  return function(amount) {
    return (amount / 100).toFixed(2);
  }
});

app.directive('monetaryInput', function($filter, $browser) {
  return {
    require: 'ngModel',
    link: function($scope, $element, $attra, ngModelCtrl) {
      var listener = function() {
        $element.val($filter('MonetaryUnit')(value, false));
      };

      ngModelCtrl.$parsers.push(function(viewValue) {
        return Math.round(parseFloat(viewValue) * 100);
      });

      ngModelCtrl.$render = function() {
        $element.val($filter('MonetaryUnit')(ngModelCtrl.$viewValue, false));
      }

      $element.bind('change', listener);
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="sa" ng-controller="FooController">
  <input type="text" ng-model="amount" monetary-input />

  <br>Model value: {{amount}}
</div>

Upvotes: 1

Related Questions