使用ng-options

时间:2016-05-12 20:36:11

标签: angularjs angularjs-ng-options

似乎与所选属性相关的角度行为在每个主要版本中来回变化。所以我只是想找个人告诉我这是否可以在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

这是我一直在玩的插件(尝试更改角度版本以增加混淆):Plunker

任何想法都是受欢迎的..我主要想避免ng-repeat,因为它在较长的列表中有很多开销,但显然比不工作更慢,所以我会使用它,直到我学习如何使用ng -options。

谢谢!

修改 这是一个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

1 个答案:

答案 0 :(得分:0)

  

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

ng-options的表达式不起作用。在同一表达式中使用select astrack 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中,就像在插件示例中一样)。

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

我更新了plunk,它适用于单选和多选。

有关详细信息,请参阅AngularJS API ngOptions