angularjs - Angular 指令 ng-selected 不更新模型

Question

在选项上使用角度指令 ng-selected 时，绑定模型在您手动更改选择之前不会更新。这是设计好的吗？

http://jsfiddle.net/PqHsL/1/

<div ng-app ng-init="colors=['red', 'yellow', 'blue']">
  <select ng-model=selectedElement>
    <option ng-repeat="color in colors" value="{{color}}" ng-selected="$last">{{color}}</option>
  </select>

  selectedElement: {{ selectedElement }}
</div>

Answer 1

我不知道它是否按设计工作。

我的印象是 ng-selected 和 ng-model 不能很好地配合使用。（请注意，ng-selected API 页面在示例选择列表中不使用 ng-model。）

以下是解决此问题的两种方法：

1. 除了设置 ng-selected 之外，还设置绑定模型。ng-init 也可以用于此：
   ng-init="colors=['red', 'yellow', 'blue']; selectedElement=colors[colors.length-1]"

2. 设置绑定模型，不要使用 ng-selected，使用 ng-options：
   ...ng-init as above...
<select ng-model=selectedElement ng-options="color for color in colors">{{color}}</select>

小提琴。

解决方案 1 有那个奇怪的“空白”/空选项，当您选择某些东西时它会消失。解决方案 2 没有空选项，并且不那么冗长。（所以是的，我喜欢解决方案 2。）

如果我们可以将模型设置为预选选项，我不确定 ng-selected 的用例是什么。我们也可以稍后以编程方式更改选择 - 请参阅Fiddle中的 ng-click 。