Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm converting some forms within my Rails 3.2 app to use AngularJS so that I can do live calculations and such. In my rails app I use money-rails to handle the currency. This treats all currency fields as integers made of of cents.

This becomes a problem when I send all the information through JSON over to my AngularJS template. Now my form is all in cents when I want them in dollars and cents.

I've put the conversion in my AngularJS controller so when I get the data from the server I convert it from cents to dollars & cents and vice vesa just before updating. Here is the code:

# Edit Investor
window.InvestorEditCtrl = ($scope, $routeParams, $location, Investor, Common) ->
  console.log 'InvestorEditCtrl'

  # Setup variable for common services(factory)
  $scope.common = Common

  $scope.master = {}  # Initialise our main object hash
  investor_id = $routeParams.investor_id   # Get the ID of the investor we are editing from the URL

  # Get the investor information & assign it to the scope master object
  console.log 'Get JSON'
  $scope.investor = new Investor.show({investor_id: investor_id}, (resource) ->
    # copy the response from server response (JSON format) to the scopes master
    $scope.master = angular.copy(resource)

    # Convert price_cents to dollars
    $scope.investor.price_cents /= 100
  )

  # Update the investor passing the JSON back to the server.    
  $scope.update = (investor) ->

    # Convert price_cents to cents
    investor.price_cents *= 100

    $scope.master = angular.copy(investor)

    investor.$update({investor_id: investor_id}, (t) ->
      $location.path('/investors/' + t.id)
    )

Is there a better way to do this?

share|improve this question
add comment

1 Answer

up vote 0 down vote

You could write either a filter or a directive that converts it to the form you want in your HTML. The filter would look something like this:

app.filter('centsToDollars', function() {
  return function(input) {
    var out = input / 100;
    return out;
  }
});

Then, in your html, wherever you want the cents displayed dollars and cents, call it like this:

<p>{{investor.price_cents | centsToDollars}}</p>

The filter would only impact the display of the data and wouldn't modify the underlying data from being cents.

If you needed to modify the display of an input field, the better route would probably be a directive. You could do something like what's referenced here

app.directive('myCentsToDollars', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      var toDollars = function(text) {
        var text = (text || "0");
        return (parseFloat(text) / 100);
      }
      var toCents = function(text) {
        var text = (text || "0");
        return (parseFloat(text) * 100);
      }

      ngModel.$parsers.push(toDollars);
      ngModel.$formatters.push(toCents);
    }
  }
});

Then, in your html, do:

<input type="text" my-cents-to-dollars ng-model="investor.price_cents" />
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.