html - 随着语言的变化，为所选选项添加了空白选项

Question

我有以下代码来显示带有一些选项的多选。所有选项都使用翻译过滤器（角度翻译）进行翻译。

<select multiple class="form-control" ng-model="field.value">
    <option ng-repeat="option in field.options()">{{option.name | translate}}</option>
</select>

它会产生这样的东西：

['Orange', 'Apple', 'Banana']

如果选择了某些选项并更改了语言，则 angularjs 将找不到所选项目的匹配项（'Orange' ！= 'Apelsin'），因此它将添加空的，我最终会得到：

[' ', ' ', 'Apelsin', 'Äpple', 'Banan']

我怎样才能避免语言的变化弄乱我的选择列表？我想在每个选项上放置一个 ID，以便它会尝试匹配它而不是翻译后的名称。

Answer 1

将翻译后的名称保留在标签内，但也使用未翻译的名称作为选项的值属性。

<option ng-repeat="option in options">{{option | translate }}

到

<option value="{{option}}" ng-repeat="option in options">{{option | translate }}

这不是 Angular 特定的http://www.w3schools.com/tags/att_option_value.asp

我有同样的问题，这解决了我...

---

另外，在控制器中将一些选项设置为默认值

模板

ng-model="field.value"

控制器

$scope.field.value = options[0] // First will be selected by default