选择不会停留在AngularJS多选绑定中

Selection does not stick in AngularJS MultiSelect Binding

本文关键字：绑定 AngularJS 停留在选择更新时间：2023-09-26

我正试图将多选中的选定值显示为视图中的单独对象，这意味着选定值将出现在表单的其他位置；实际的多选将被隐藏，只需要发布选定的值，就可以将它们绑定到视图模型服务器端（ASP.NET MVC）。

这似乎奏效了。但是，AngularJS会在ID前面加上"string:"，所以我必须使用track by。如果我这样做了，多选开始变得奇怪，也就是说，如果我选择了一个选项，该选项将立即再次取消选择，除非我单击该选项两次。我不知道那里发生了什么。

这是Plunker的密码，有人知道我遗漏了什么吗？

似乎是ng选项指令的问题(https://github.com/angular/angular.js/issues/6564)。

我还在angularjs文档中找到了一些信息：

"在同一表达式中使用select as和track by时要小心。"

https://docs.angularjs.org/api/ng/directive/ngOptions

我分叉了你的plunker，并使用了一个带有ng重复的<options>标签：

https://plnkr.co/edit/uH4hGgUGjvAxcBt3bViT?p=preview

问题出在生成器模式value.id as value.name上，尽管文档声称它已经坏了一段时间。

我已经分叉了你的plunkr，并将select标签更改为：-

<select id="tracking" multiple="multiple" ng-model="vm.selected" 
  ng-options="value.name for value in vm.values track by value.id">

如果您现在在浏览器中检查此元素，您将看到option元素的value属性上没有不需要的"string:"前缀。

为了让您放心，我还编写了一个函数来提取表单提交后将发送到服务器的值。

但是，由于我的更改，vm.selected数组中的项不再是字符串ID，而是实际的对象本身。因此，请记住将.id添加到引用数组成员的代码中，例如vm.selected[ i ].id而不是vm.selected[ i ]