使用 ng-options 为 single/multi 选择设置选定属性

Question

似乎 angular 对所选属性的行为在每个主要版本中来回变化。所以我只是在找人告诉我这是否可以在 1.5.x 版本中使用 ng-options 而不是 ng-repeat 实现。

我正在尝试做的事情：让angular像下面这样创建html（这样它可以被jquery插件解释）

<select multiple="multiple"...>
<option value="abc123" label="Justin" selected="selected">Justin</option>
</select>

我已经尝试了很多变体

<select ms-multi-listbox multiple="multiple" class="multi-select" 
 id="ym" name="ym" ng-model="groupCtrl.memSelection" 
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id">

运气不好。

模型看起来像这样：

groupCtrl.memSelection =["abc123"];//inbound from api as is selectableMembers

这是我一直在玩的一个小插曲（尝试更改 angular 版本以增加混淆）：Plunker

欢迎任何想法。我主要想避免 ng-repeat，因为它在较长的列表中有很多开销，但显然慢总比不工作好，所以我会使用它直到我学会如何做使用 ng-选项。

谢谢！

编辑： 这是一个 ng-repeat 实现了我想要的结果：

<option ng-repeat="mem in groupCtrl.selectableMembers" value="{{mem.id}}" label="{{mem.displayName}}" ng-selected="groupCtrl.memSelection.indexOf(mem.id)>=0">{{mem.displayName}}</option>
enter code here

Answer 1

Be careful when using select as and track by in the same expression. AngularJS API ngOptions

您对 ng-options 的表达无效。在同一表达式中使用 select as 和 track by 会将 mem.id 计算为 mem.id.id。将表达式更改为

ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id"

你设置选定对象的方式对我来说也不对。你不能只设置 id，你必须将整个对象设置为选中，否则你的 ng-options 表达式评估也会失败。因此，将您的选择更改为（假设可选数据存储在 $scope.model 中，就像在 plunk 示例中一样）。

$scope.memSelection = [$scope.model[0], $scope.model[1]]

我已经更新了 plunk，它适用于单选和多选。

有关详细信息，请阅读 AngularJS API ngOptions。

使用 ng-options 为 single/multi 选择设置选定属性

Set selected attribute for single/multi selection with ng-options

angularjs

angularjs-ng-options