使用AJAX多选的Angular ui-select2 - 将最终选择值检索为id而不是json

Question

带有AJAX多选的Angular ui-select2 - 将最终选择值检索为id而不是json

问题陈述

我想使用tokeninput / selected / select2样式的ui控件来编辑模型中的id数组。那个id数组是我正在构建一个编辑器/表单的大型模型中的一个属性的值。编辑id数组后，当我将模型提交给服务器时，我希望将该属性作为id数组提交，而不是作为json对象数组提交。

使用angular的ui-select2组件时，my属性的内容将被json对象数组替换。目前尚不清楚如何在编辑完成后撤消该操作。我以为我可能正在使用错误的组件，但所有线程似乎都指向使用ui-select2来做角度的这种事情。

解释

数据模型以'myProp'属性开头，该属性是一个id数组：

{"myProp":["4","6"]}

ui-select2指令用json对象替换那些id。以下是加载ui-select2时模型的示例。 （这个plunker的现场演示：http：//plnkr.co/edit/vEf1VwnRHNYdB9AuR9zO）：

{"myProp":[{"id":"4","text":"Label for 4"},{"id":"6","text":"Label for 6"},{"id":7,"text":"Seventh","color":"blue"}]}

当我保存模型时，我希望将此属性作为id数组提交给服务器，不是json对象数组。所以基本上我想把数组展平回到ids而不是json对象。 select2 API提供了一个 val 方法，该方法将返回此数组的id。我怎么能/应该在angular的ui-select2组件的上下文中使用它？

警告：我在页面上多次执行此操作以获取多个属性，因此特定于该属性的硬编码修复将无效。它必须是我用select2

编辑的任何预言自动发生的事情

示例代码

（请参阅此plunker中的代码：http://plnkr.co/edit/vEf1VwnRHNYdB9AuR9zO）

Answer 1

在select2指令中，我尝试更改：

的实例

    elm.select2('val',

到

    elm.select2('data',

这很有用，但只有在你添加或删除一个元素之后。但是，添加

    elm.trigger('change'); 

到initSelection部分，这会在加载时触发它，我认为应该为您提供所需的行为。

Here's a plunker.