我使用bootstrap-select向我的Angular應用程序添加了語言選擇器。過去它曾經工作過，但在瀏覽器更新之後，select元素不再可見。我只看到沒有選項的標籤。在Angular應用程序中未顯示bootstrap-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>

是否有任何已知的問題，使用引導選有角的時候？即使沒有任何數據綁定，也不會顯示選擇框。

我使用：

的jQuery 1.12.4
引導3.3.7
引導選1.12.2
角1.4.7

來源

2017-06-14 user1438038

模板中沒有AngularJS處理。它只是引導。 – lin

將jQuery，bootstrap和AngularJS混合使用是個不好的做法。 – lin

我知道，即使我刪除了所有的數據綁定，也不會呈現選擇框。似乎這裏有什麼干擾。 – user1438038

TL; dr

角度擴展nya-bootstrap-select爲我解決了這個問題。該模塊不依賴於外部JavaScript文件，並克服了Angular和jQuery（數據綁定與事件驅動）內不同概念的問題。

詳細答案

原來，使用角和jQuery（這是由自舉需要）被廣泛氣餒，由於different concepts of both libraries（數據綁定與事件驅動）。所以最終，直接使用bootstrap-select在我的Angular應用程序中不是一個選項。

有一個叫做angular-bootstrap-select的角度擴展，它試圖克服這個技術問題。但是，GitHub項目標記爲DEPRECATED。

我發現了一個名爲ng-bootstrap-select的叉子，它仍在維護中。雖然，我沒有仔細看看這個項目。

現在我正在使用nya-bootstrap-select，這是另一個Angular擴展。它鬆散地基於最初的引導 - 選擇實現，但對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>

組合框從一開始初始化，選擇不同的項目立即切換語言和當前用戶的語言被自動預先選擇，當第一次加載頁面時。

來源

2017-06-22 09:14:16 user1438038

在Angular應用程序中未顯示bootstrap-select的選項

回答

TL; dr

詳細答案

相關問題