无法让引导多选与角度一起使用答案

【问题标题】：Can't get bootstrap multiselect to work with angular无法让引导多选与角度一起使用
【发布时间】：2016-04-11 13:52:56
【问题描述】：

我正在尝试让引导多选小部件工作。当我对所有选项进行硬编码时，它会起作用，如下所示：

<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 但不能没有任何运气。

【问题讨论】：

建议你摆脱 bootstrap.js...并使用已经开发并随时可用的 Angular 模块
看看这个 jsfiddle -- jsfiddle.net/58Bu3/1
不建议你像这样混合 jquery 和 angular... 最好只是制作（或找到一个已经工作的）指令。

标签： javascript angularjs twitter-bootstrap bootstrap-multiselect

【解决方案1】：

如果您要使用 Bootstrap 多选功能，您实际上并不需要它。您可以在 Angular 中获得相同的功能，方法是在下拉列表中填充您的选项，然后在 ng-click 上将它们添加到新列表中。

    <span uib-dropdown on-toggle="toggled(open)" auto-close = "outsideClick" >
     <a class = "filter-names" href id="simple-dropdown" uib-dropdown-toggle>
       My_Dropdown<span ng-repeat="list in generated_list">{{list.genre_name}},</span><b class="caret"></b>
     </a>
     <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" >
        Search: <input type = "text" placeholder = "search in my list" ng-model = "search.name" />
        <li ng-repeat="item in list_to_populate | filter:search" ng-class = "{true: 'filter-selected', false: ''}[item.selected == true]" ng-click="addToFilter(item)">
            {{item.name}}
        </li>
     </ul>
</span>

在控制器中：

    $scope.addToFilter = function(item) {

  if(item.selected == "undefined" || item.selected == false)
  {
    item.selected = true;
    Filters.addToFilters(item);
  }
  else
  {
    Filters.removeFromFilters(item);
    item.selected = false;
  }
}

最后有一个服务“过滤器”来存储这个列表并调用函数在任何地方使用它。

【讨论】：

感谢您的回答！但这并不是我想要的……这基本上是问：“我如何让 X 工作？” A：“忘记 X，使用 Angular 从头开始实现它”

【解决方案2】：

您缺少“ng-model”。
它是“ng-options”而不是“ng-option”。

试试这个：

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

【讨论】：

那也没用。填充选项列表确实很好，但是当小部件转换选择元素时，它会忽略 ng-repeat 生成的所有内容
你能创建一个 plunker / jsfiddle 并分享它，这样我就可以看到你到底面临什么？

【解决方案3】：

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

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

现在一切正常。

【讨论】：