如何在列表中的ng-options上预选多行

Question

我有一个HTML列表：

基本上我要做的是显示此框中有一个列表，用户可以选择多个然后我保存它。保存和检索工作。 selectedList将填充上次用户选择的项目，而fullList是整个选项列表。我希望能够在加载数据时突出显示所选择的选择行，就像从上一个状态恢复一样。我似乎无法突出/选择......我在网上搜索并且找不到任何类似于我的东西...一些帮助将不胜感激！谢谢！

Answer 1

如果您正在谈论使用ng-model和ng-options的默认浏览器multiselect，您可能只是犯了一个常见的错误。

默认多选的HTML：

<select multiple ng-model="selectedOptions" ng-options="option.value as option.label for option in optionList"></select>

请确保您不要忘记 option.value 。 没有它，多选不会预先选择您选择的选项。

<强> optionList ：

$scope.optionList = [
            {'value':0, label :'Option 1'}, 
            {'value':1, label :'Option 2'}, 
            {'value':2, label :'Option 3'}, 
            {'value':3, label :'Option 4'}, 
            {'value':4, label :'Option 5'}, 
            {'value':5, label :'Option 6'}, 
            {'value':6, label :'Option 7'}, 
            {'value':7, label :'Option 8'}
];

<强> selectedOptions ：

$scope.selectedOptions= [2,5];

当您对 selectedOptions 使用对象数组时，不会在多选框中选择您的选择：

$scope.selectedOptions= [
            {'value':2, label :'Option 3'},
            {'value':5, label :'Option 6'}
];

为什么呢？ 因为 option.value为是指 option.value 值，例如 {'value'：2，标签：'选项3' } ，但 2 。

您是否应该将 option.value替换为 选项替换为并使用第二个 selectedOptions 列表，因为它将是，例如， {'value'：2，标签：'选项3'} 。它不起作用。

由于某些原因，多重选择无法处理ng-model中的对象数组，或者无法在初始选择的ng-options中处理 option.value 的对象。 ..为什么，我不确定。

<强>结论：

1. 多重选择需要 option.value 参考
2. 在保持引用的同时，为selectedOptions使用简单数组

希望这有帮助。

Answer 2

由于您要从列表中选择多个项目，因此您可能希望使用插件。

https://github.com/isteven/angular-multi-select

或

https://github.com/amitava82/angular-multiselect

或

https://github.com/dotansimha/angularjs-dropdown-multiselect

---

要预选几个选项，只需将选择字段绑定到模型并使用值初始化该模型。