2

Using AngularJS, I have an input on an HTML form:

<input id="amount" type="number" ng-model="amount">
  • I want the user to enter something like: 12.3
  • But I want the input to show something like that: 12.30 €
  • I want this real-time or on blur.

  • I also want to keep the possibility to easily perform arithmetic on this input:

    <!-- multiply by VAT -->
total: {{ amount * 1.015 }}

I already had a look at:

Here is an empty jsfiddle if needed: http://jsfiddle.net/6V7c2/

Community
  • 1
  • 1
Luke Skywalker
  • 1,464
  • 3
  • 17
  • 35
  • Take a look at https://docs.angularjs.org/guide/i18n – Whisher Jul 18 '14 at 08:42
  • Yes I saw that (https://docs.angularjs.org/api/ng/filter/currency) but it's not what I need. If you look closely at the example they provide, the input () is not formatted. Only the output ({{ }}). In my case I could format the total, but not the input string. – Luke Skywalker Jul 18 '14 at 08:49

1 Answers1

0

Just extending Doug R's solution from angular directive encapsulating a delay for ng-change you can make use of the directive based solution.

Thereby after a change in the input element, the required actions take place after a configurable amount of delay.

You can see the same in http://jsfiddle.net/Lrt7e/1/

<input ng-model="vars.value" ng-change="updateValue(vars.value)" ng-delay="1000" />
Community
  • 1
  • 1
SamD
  • 120
  • 1
  • 10
  • Yes I though about that but you are changing the model here. Thus arithmetic is not possible anymore. Meaning, when you will compute the total: {{ vars.value * 1.015 }}, once the model is updated with the currency sign, it fails. What I need here is something between the model and it's representation in the HTML. – Luke Skywalker Jul 18 '14 at 10:38
  • Indeed that might do the trick. I don't find that solution elegant though. I'll try to figure out something or see if anyone else as some kind of magic angular directive. Otherwise, I'll go with your solution. – Luke Skywalker Jul 18 '14 at 11:04