1

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

问题陈述

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

当使用 Angular 的 ui-select2 组件时，我的属性的内容会被一个 json 对象数组替换。目前尚不清楚如何在编辑完成后撤消它。我以为我可能使用了错误的组件，但是在使用 angular 执行此类操作时，所有线程似乎都指向使用 ui-select2。

解释

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

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

ui-select2 指令将这些 id 替换为 json 对象。这是加载 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）

4

1 回答 1

1

在 select2 指令中，我尝试更改以下实例：

    elm.select2('val',

到

    elm.select2('data',

这有效，但只有在您添加或删除一个元素后。但是，通过添加

    elm.trigger('change');

到 initSelection 部分，这会在加载时触发它，我认为这应该会给你你想要的行为。

这是一个笨蛋。

于 2013-10-07T07:53:51.233 回答