Question

我试图让bootstrap multiselect小部件工作。它适用于我对所有选项进行硬编码，如下所示：

<select id="topic-select" multiple="multiple">
  <option val='math'>math</option>
  <option val='critical_reading'>critical reading</option>
  <option val='writing'>writing</option>
</select>



$("#topic-select").multiselect({
  includeSelectAllOption: true,
  selectAllText: 'composite score',
  allSelectedText: 'composite score',
  selectAllNumber: false,
});

但如果我尝试使用angular填充选项，请执行以下操作：

<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
 </select>

然后下拉窗口有点错误，并且没有显示任何选项。

如果我将javascript转换为多选，则会显示所有选项。

我看了一下这个类似的问题： angularjs-ng-repeat-in-bootstrap-multiselect-dropdown 但它无法幸运。

Answer 1

您缺少＆＃34; ng-model＆＃34;。
这是＆＃34; ng-options＆＃34;而不是＆＃34; ng-option＆＃34;。

试试这个：

<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList">
</select>

Answer 2

我没有使用angular填充选项，而是将它们添加到div中，并使用vanilla javascript，如下所示：

var topicSelect = $("#topic-select");
for (var topicId in topicList) {
  topicSelect[0].add(new Option(topicList[topicId], topicId));
}

现在一切正常。

无法使用bootstrap multiselect来处理角度

2 个答案: