TL;博士

Question

我使用 bootstrap-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>

在Angular中使用 bootstrap-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和jQuery（Bootstrap所需）是非常不鼓励的。所以最终，在我的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>

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

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

1 个答案:

TL;博士

详细答案