2016-05-10 5 views
0

Ich versuche, einen Wert in input zu übersetzen. Die Eingabe ist deaktiviert, wenn ich sie übersetzen muss, damit der Benutzer keinen Text in das Textfeld eingeben kann. Die Daten werden über ng-model eingegeben und sieht derzeit wie folgt aus:Übersetzen ng-Modell Wert in Eingabe

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

Ich habe auch versucht, die folgenden:

<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"> 

aber keiner von ihnen arbeitete.

Ich könnte den Wert im Controller übersetzen, aber ich möchte dies in den HTML-Tags tun, damit der tatsächliche Wert auf dem Bereich nicht geändert wird. Wie kann ich das erreichen?

+0

siehe dies. http://stackoverflow.com/questions/32753082/how-to-tie-ng-model-variable-to-the-value-of-an-input-box-in-angular –

+0

@DurgpalSingh Ja, ich könnte eine erstellen zweite Variable im Bereich, die die übersetzte Version des ursprünglichen Werts darstellt. Aber ich würde es lieber vermeiden und stattdessen etwas auf der html-Seite machen. Aber danke für den Vorschlag, ich werde das anwenden, wenn nichts anderes auftaucht. – Joetjah

Antwort

0

Ich habe es mit diesem Beispiel arbeiten: Denken Sie über eine Eingabe mit einem Ja oder Nein Wert, der übersetzt werden soll. Versuchen Sie eine Möglichkeit, Datenbindung in der Vorlage:

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

Wenn Sie auch den Wert aktualisieren möchten, hören für Änderungen in der Komponente:

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

In Bezug auf die i18n-Dateien.

en.json:

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

fr.json:

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

Plunker:

http://plnkr.co/edit/BeYBAWG57eIZOU3KdBCD

0

Sie können anstelle der HTML-Eingabe ng-Wert für Eingaben verwenden > Wert. Dann können Sie sie leicht übersetzen:

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