使用AngularJS双向绑定选择子对象

时间:2014-10-01 21:42:05

标签: javascript angularjs select

我有一个带有这个选择元素的角形:

<select ng-model="expense.category" ng-options="category.code for category in categories"></select>

其中费用是我在表单中创建/编辑的对象,而expense.category指向子对象类别(具有属性“id”和“code”),该控件将由此控件选择。

这一切都非常适合创造新的开支 - 类别按照应有的方式得到保存。加载费用进行编辑时,一切都很好 - 费用在控制器中有其类别。但是在表单上,​​select没有预先填充正确的category-entry,它是空的,尽管所有类别都被加载到select元素中。因此,绑定仅在一种方式(从形式到模型)起作用,而在选择字段中不起作用(从模型到形式)。所有其他字段(费用属性)都可以正确填充到编辑表单中。

任何想法如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

ng-optionsng-model之间的比较是通过引用而不是值来完成的。我怀疑你的expense.category在加载时是与categories数组中的实体分开的实体。 您应该使用expense.category中的category填充categories。 另一种选择是用下拉列表替换选择。这将代表更多的代码(你必须自己处理ng-click上的绑定),但会给你更多的比较和显示控制。

答案 1 :(得分:1)

expense.category模型必须是categories数组中的现有项目。

您可以采取的措施是在数组中搜索正确的项目(借助代码属性),然后将您现有的类别副本替换为{{1}中的引用} array

这可以这样做:

categories

这是工作jsfiddle-demo

相关问题