首頁 > web前端 > js教程 > 詳解AngularJs + bootstrap如何實作下拉選擇框

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

零到壹度
發布: 2018-03-22 17:03:46
原創
2557 人瀏覽過

本文主要和大家詳解詳解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為值

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

相關建議:

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

js實作左右選擇方塊 

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板