CODEWITHSUNDEEP
angularjsangularjs-directive
Justin Young
Justin Young

Reputation: 2463

input directives cents to dollars

I'm trying to create a directive which allows me to start in the 1/100th column of a dollar amount. For instance, say the dollar amount I want to display in my form is 23.76 I would start typing 2, 3, 7, 6 and as I type, the displayed amount would be $0.02, $0.23, $2.37, $23.76, yet my module would be in cents so 2376

I've put together a codepen but am running into an issue with leading zeros. For instance, type in an amount, then delete it out to 0 and you'll see what I mean in the "Raw value" field, there will be trailing zeroes.

What can I do to ensure that if I type in an amount the raw value remains in cents with no leading zeros?

Upvotes: 1

Views: 568

Answers (2)

Kailas
Kailas

Reputation: 7578

You can try using the "number" filter of angular for this purpose. Add it to your html as: {{moneyVal | number}} here fraction size will be 0.

<div class="body" ng-app="myApp">
  <div class="wrapper" ng-controller="MyCtrl">
    <div class="info">Raw Value: {{moneyVal | number}}</div>


    <input class="input-phone" type='text' money-input ng-model="moneyVal" />
  </div>
</div>

Checkout the codepen here.

Note: This is an html level / presentation level solution.
Hope this helps... :)

Upvotes: 0

Justin Young
Justin Young

Reputation: 2463

I kept cracking and came up with this. It's not the cleanest, but it does the job.

 ngModelCtrl.$parsers.push(function(viewValue) {
          var value = viewValue.replace(/[^0-9]/g, '')
          value = $filter('number')(value, 0)
          value = value.replace(/[^0-9]/g, '')

            return value
        });

codepen

Upvotes: 0

Related Questions