使用 ng 选项为单选/多选设置所选属性

Question

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

我想做什么：有角度创建像下面这样的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

这是我一直在玩的一个 plunk(尝试更改角度版本以增加混乱(： Plunker

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

谢谢！

编辑：这是一个 ng 重复，可以达到我想要的结果：

<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

在同一表达式中使用选择为和跟踪依据时要小心。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。