如何在Angular的下拉列表中选择选项时更改对象？

Question

考虑这个fiddle

正如您所看到的，它只是一个带下拉列表和绑定的简单表单。我在小提琴中提到了两个观点：细节和编辑。详细信息视图以纯文本格式显示所有内容，编辑视图是可以进行更改的表单。

我尝试实现的是，当下拉列表更改值时，我想动态更新User.title对象。我怎样才能做到这一点？

编辑： 在下拉列表中，我需要知道在发布表单时选择了哪个ID。我还需要知道id来设置下拉列表的选定值。

Answer 1

使用ng-model将视图绑定到模型中。

但是在ng-options指令中，'as'之前的部分绑定了ng-model中提供的更多'model'。如果省略title.id，则整个对象将成为“额外模型”{id: .., name: ..}

http://jsfiddle.net/rLjC5/1/

PS：这就是为什么你不能在没有ng-model的情况下使用ng-options。

Answer 2

您显然希望在下拉列表中选择默认值。您必须根据titles数组的值初始化User.title对象。

检查此fiddle。

Answer 3

这样做的一种方法是将select的模型绑定到User.title。

<select data-ng-model="User.title" data-ng-options="title.name for title in titles"

这是小提琴http://jsfiddle.net/vR274/1/