詳解AngularJs + bootstrap如何實作下拉選擇框

本文主要和大家詳解詳解AngularJs + bootstrap如何實現下拉選擇框 ，主要以程式碼的形式和大家分享，希望能幫助大家。

環境：bootstrap-select.js、bootstrap-select.css

方式一

<select name="departInfo" ng-model="searchArgQry.departInfoSet" 
 class="form-control" multiple size="1" bootstrap-select="{&#39;liveSearch&#39;: true}">
        <c:forEach items="${departInfoList}" var="departInfo">
            <option value="${departInfo.id}">${departInfo.deptName}</option>
         </c:forEach>
 </select>

其中departInfoList為一個List物件

方式二

<select class="form-control" name="deptId" ng-model="searchArg.deptId"
     multiple ng-options="k as v for (k, v) in allDept" size="1" 
      bootstrap-select="{&#39;liveSearch&#39;: true}"></select>

其中allDept為Map對象，key為ID，value為值

效果：

相關建議：

vue.js實作單選方塊、複選框與下拉方塊 

js實作左右選擇方塊 

js實作下拉方塊支援新增和刪除的方式

以上是詳解AngularJs + bootstrap如何實作下拉選擇框的詳細內容。更多資訊請關注PHP中文網其他相關文章！