Translate ng-model value in input

Question

I'm trying to translate a value in an input. The input is disabled when I need to translate it so the user can't type text in the textbox. The data is inputted using ng-model and currently looks like this:

<input ng-model="reason" ng-disabled="true" type="text" class="form-control" name="reason">

I've also tried the following:

<input ng-model="reason|translate" ng-disabled="true" type="text" class="form-control" name="reason">
<input ng-model="{{ reason | translate}}" ng-disabled="true" type="text" class="form-control" name="reason">

but none of them worked.

I could translate the value in the controller, but I'd like to do this in the html tags so the actual value on the scope doesn't get changed. How can I achieve this?

see this. http://stackoverflow.com/questions/32753082/how-to-tie-ng-model-variable-to-the-value-of-an-input-box-in-angular — Durgpal Singh, May 10 '16 at 12:33
@DurgpalSingh Yes, I could create a second variable in the scope to represent the translated version of the original value. But I'd prefer to avoid that and do something in the html-page instead. But thank you for the suggestion, I'll apply that when nothing else comes up. — Joetjah, May 10 '16 at 12:37

score 1 · Answer 1 · answered Apr 20 '17 at 14:44

1

You can use ng-value for inputs instead of the HTML input>value. Then you can translate them easily:

<input ng-value="ctrl.reason | translate" ng-model="ctrl.reason">

answered Apr 20 '17 at 14:44

Gordon Mohrin

645
1
6
17

score 0 · Answer 2 · answered Dec 29 '16 at 15:40

I got it working with this example: think about an input with a Yes or No value that you want to be translated. Try one way data-binding in your template:

<input value="{{ answer | translate }}"
    type="text" class="form-control" name="answer"
    (change)="answerChanged($event)">

If you also want to update the value, listen for changes in the component:

  answerChanged(Event event) {
      this.answer = event.target.value.toUpperCase();
  }

Regarding the i18n files.

en.json:

{
  "YES": "Yes",
  "NO": "No"
}

fr.json:

{
  "YES": "Oui",
  "NO": "Non"
}

Plunker:

http://plnkr.co/edit/BeYBAWG57eIZOU3KdBCD

Translate ng-model value in input

2 Answers2