Convert user input with function and ng-model in AngularJS

Question

Im trying to implement in an app, a unit converter from mm to inches and viceversa. This is part of a larger design app and the idea is that the user can work in mm-inch and use a button to change the displayed values and also be able to edit the input (like xPosition or shapeWidth).

I made this simple fiddle to show my problem.

As you can see, the converter works fine, but the input stops working and i can't edit the input, so the value is fixed with the initial value of the directive. Since this values can be modified, i can't use ng-init since its for initialization only.

If I use ng-model="this.value" the input starts accepting changes but the conversion stops working. The value should be inside the input, I can't have another number displayed at the side with the converted number.

Is there a way to enable the user input and also use the getValue or something similar to make the conversion when the buttons are pressed? Don't usually work in AngularJS but got this task so theres probably a directive option.

Thanks!

Answer 1

You should convert the value only on change of units. I changed a little bit your example here: https://jsfiddle.net/avgustin/y1khr2j8/5/ I used this.value in ng-model:

ng-model="this.value"

and changed the functions setUnit and convertUnit to do the conversion in both directions.

$scope.convertUnit = function(value) {
    let appUnit = $scope.unit;
  if(appUnit == 'in') {
    return parseFloat((value / 25.4).toPrecision(3));
  }
  return parseFloat((value * 25.4).toPrecision(3));
}