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

Question

考虑这个小提琴

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

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

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

Answer 1

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

检查这个小提琴。

Answer 2

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

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

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

PS：这就是为什么没有 ng-model 就不能使用 ng-options 的原因。

Answer 3

一种方法是将选择的模型绑定到 User.title。

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

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