bootstrap-select 的选项未显示在 Angular 应用程序中

Question

我使用 bootstrap-select 添加了一种语言 select 或到我的 Angular 应用程序。它过去曾经有效，但在浏览器更新后，select 元素不再可见。我只看到没有选项的标签。

<div class="row">
  <div class="col-md-12">
    <label for="language_select">Language:</label>
    <select id="language_select" class="selectpicker" data-width="fit">
      <option value="en" data-content="<span class='flag-icon flag-icon-gb'></span> English"></option>
      <option value="de" data-content="<span class='flag-icon flag-icon-de'></span> Deutsch"></option>
    </select>
  </div>
</div>

将 bootstrap-select 与 Angular 一起使用时是否存在任何已知问题？即使没有任何数据绑定，select 框也不会显示。

我正在使用：

jQuery 1.12.4
Bootstrap 3.3.7
bootstrap-select 1.12.2
Angular 1.4.7

Answer 1

tl;博士

Angular 扩展 nya-bootstrap-select 为我解决了这个问题。该模块不依赖于外部 JavaScript 文件，并克服了 Angular 和 jQuery 中不同概念的问题（数据绑定与事件驱动）。

详细解答

事实证明，由于 different concepts of both libraries（数据绑定与事件驱动）。所以最终，在我的 Angular 应用程序中直接使用 bootstrap-select 不是一种选择。

有一个名为 angular-bootstrap-select 的 Angular 扩展试图解决这个技术问题。但是，GitHub 项目被标记为 DEPRECATED。

我找到了一个叫做 ng-bootstrap-select 的分支，它仍在维护中。虽然，我没有仔细看那个项目。

我现在使用 nya-bootstrap-select，这是另一个 Angular 扩展。它松散地基于初始 bootstrap-select 实现，但不依赖于 jQuery 和 Bootstrap 的 JavaScript代码。您只需要包含 Bootstrap CSS 文件。

我的代码现在看起来有点像这样：

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4">
    <label for="language_select">Language:</label>
    <ol id="language_select" class="nya-bs-select">
      <li class="nya-bs-option" value="en">
        <a><span class="dummy-wrapper"><span class="flag-icon flag-icon-gb"></span> English</span></a>
      </li>
      <li class="nya-bs-option" value="de">
        <a><span class="dummy-wrapper"><span class="flag-icon flag-icon-de"></span> Deutsch</span></a>
      </li>
    </ol>
  </div>
</div>

组合框从一开始就初始化，选择不同的项目会立即切换语言，并且在第一次加载页面时会自动预select当前用户语言。

bootstrap-select 的选项未显示在 Angular 应用程序中

Options of bootstrap-select not displayed in Angular application

angularjs

twitter-bootstrap-3

bootstrap-select

tl;博士

详细解答