Question

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

<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 page在示例选择列表中不使用ng-model。）

以下是两种解决方法：

除了设置ng-selected外，还设置绑定模型。 ng-init也可用于此：
ng-init="colors=['red', 'yellow', 'blue']; selectedElement=colors[colors.length-1]"
设置绑定模型，不要使用ng-selected，使用ng-options：
...ng-init as above...
<select ng-model=selectedElement ng-options="color for color in colors">{{color}}</select>

Fiddle

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

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

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

1 个答案: