Angular ng-options 损坏 1.4+

Question

Angular < 1.4 使用 ng-options 显示如下：

<select ng-options="option.value as option.label for option in options" ng-model="selectedValue">

具有以下选项数组：

[{ value:"4_220588",label:"dropdown 1-test value 1"},{value:"4_220589",label:"dropdown 1-test value 2"}]

如果您查看结果 HTML 就如您所料：

<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-touched">
    <option value="" class="">-- SELECT ONE --</option>
    <option value="0" label="dropdown 1-test value 1">dropdown 1-test value 1</option>
    <option value="1" label="dropdown 1-test value 2">dropdown 1-test value 2</option>
</select>

一旦将 angular 版本更改为 Angular 1.4+，选项值属性就会一团糟。这是使用较新版本 angular:

的相同 ng-options 的输出

<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-empty ng-touched">
    <option value="" class="" selected="selected">-- SELECT ONE --</option>
    <option label="dropdown 1-test value 1" value="string:4_220588">dropdown 1-test value 1</option>
    <option label="dropdown 1-test value 2" value="string:4_220589">dropdown 1-test value 2</option>
</select>

让值仍然显示为数组索引的解决方案是什么？

这里是plnkr：http://plnkr.co/edit/3CTUI9b9ntTGWhXDNQI5?p=preview

Answer 1

一种解决方案是在选项上使用 ng-repeat。

<select ng-model="vm.selectedValue">
  <option value="" selected disabled>-- SELECT ONE --</option>
  <option ng-repeat="option in options" 
           value="$index" 
           ng-selected="option === vm.selectedValue">
        {{option.label}}
  </option>
</select>

这是您更新后的 Plunkr。

Answer 2

这应该可以解决问题：

<select ng-options="index as option.label for (index, option) in options2" ng-model="vm.selectedValue">
    <option value="">-- SELECT ONE --</option>
  </select>

在渲染时，所选选项的值将是 string:index，但将输出不包含类型的所需值。这是您编辑的 plunker，在选定值中具有预期结果：

Plunker

Answer 3

您的应用程序逻辑不应对下拉列表中的 value 属性敏感，因为 ng-model 将正确设置模型，而不管 HTML 中的输出是什么。如果您的应用程序逻辑确实需要此属性的特定格式，您有 3 种方法来处理此 breaking change.

使用 ng-repeat 而不是 ng-options。这是最不推荐的选项，因为它显着改变了 select 列表的工作方式。
使用 track by 子句来强制执行您期望的密钥格式，即 option.value as option.label for option in options track by option.value。这假定 option.value 存在并且是您希望表示的值。 http://plnkr.co/edit/TSXfkpf1lhsE9QYa2NAc?p=preview
更改您的应用程序逻辑以期待 hashkey，或者最好更正逻辑，使其仅依赖于 ng-model。

Angular ng-options 损坏 1.4+

Angular ng-options broken 1.4+

angularjs

ng-options