在输入中翻译 ng-model 值答案

【问题标题】：Translate ng-model value in input在输入中翻译 ng-model 值
【发布时间】：2016-05-10 12:30:56
【问题描述】：

我正在尝试转换 input 中的值。当我需要翻译时输入被禁用，因此用户无法在文本框中键入文本。数据是使用ng-model 输入的，目前看起来是这样的：

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

但他们都没有工作。

我可以翻译控制器中的值，但我想在 html 标记中执行此操作，因此范围上的实际值不会改变。我怎样才能做到这一点？

【问题讨论】：

看这个。 stackoverflow.com/questions/32753082/…
@DurgpalSingh 是的，我可以在范围内创建第二个变量来表示原始值的翻译版本。但我宁愿避免这种情况，而是在 html 页面中做一些事情。不过谢谢你的建议，我会在没有其他问题的时候应用。

标签： html angularjs angular-ngmodel angularjs-ng-model

【解决方案1】：

您可以将 ng-value 用于输入而不是 HTML 输入>值。然后你就可以轻松翻译它们了：

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

【讨论】：

【解决方案2】：

我在这个例子中得到了它：考虑一个你想要翻译的带有 Yes 或 No 值的输入。在模板中尝试一种数据绑定方式：

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

如果你还想更新值，监听组件的变化：

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

关于 i18n 文件。

en.json:

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

fr.json:

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

Plunker：

http://plnkr.co/edit/BeYBAWG57eIZOU3KdBCD

【讨论】：