ホームページ > ウェブフロントエンド > jsチュートリアル > AngularJs + ブートストラップがドロップダウン選択ボックスを実装する方法の詳細な説明

AngularJs + ブートストラップがドロップダウン選択ボックスを実装する方法の詳細な説明

零到壹度
リリース: 2018-03-22 17:03:46
オリジナル
2569 人が閲覧しました

この記事では、主に AngularJs + ブートストラップでドロップダウン選択ボックスを実装する方法を詳しく説明します。お役に立てれば幸いです。

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

方法 1

<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>
ログイン後にコピー

partInfoList は List オブジェクトです

方法 2

<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 オブジェクトであり、キーはID は値です

効果:
AngularJs + ブートストラップがドロップダウン選択ボックスを実装する方法の詳細な説明

関連推奨事項:

vue.js はラジオ ボタン、チェック ボックス、ドロップダウン ボックスを実装します

js は左右の選択ボックスを実装します

js はドロップダウン ボックスのサポートを実装します。追加と削除の方法

以上がAngularJs + ブートストラップがドロップダウン選択ボックスを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート