AngularJS + Select2は複数選択ボックスを実装します

Select2は、選択したドロップダウンボックスの美化プラグインの拡張機能です。醜い、非常に長い選択選択ボックスの見栄えがよくなり、便利になり、検索、リモートデータセット、無限スクロールの結果をサポートします。

効果プレビュー

select2を使用すると、このようなドロップダウンボックスを実装できます

リソースを紹介する

すべてのjsプラグインと同様に、select2もいくつかのリソースを導入する必要があります。こちらにはオンライン版とローカル版がありますので、必要に応じてご紹介ください。ローカルバージョンの抽出コード：pzik

オンライン版：

    <link rel="stylesheet" href="https://img.vantee.cn/AngularJS%2BSelect2/bootstrap.min.css">    
	<script src="https://img.vantee.cn/AngularJS%2BSelect2/jquery-2.2.3.min.js"></script>
    <script src="https://img.vantee.cn/AngularJS%2BSelect2/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://img.vantee.cn/AngularJS%2BSelect2/select2.css"/>
    <link rel="stylesheet" href="https://img.vantee.cn/AngularJS%2BSelect2/select2-bootstrap.css"/>
    <script src="https://img.vantee.cn/AngularJS%2BSelect2/select2.min.js" type="text/javascript"></script>

    <!--引入AngularJS-->
    <script src="https://img.vantee.cn/AngularJS%2BSelect2/angular.min.js"></script>

    <!--注意：这里需要引入你的ng-module文件-->
    <script src="你的base.js"></script>

    <!--select2-angularJS 这里一定要引入在ng-module下-->
    <script src="https://img.vantee.cn/AngularJS%2BSelect2/angular-select2.js"></script>

注： select2-angular.jsファイルはアプリを使用するため、ng-moduleの後に導入する必要があります。

フロントエンドページでselect2を使用する

selectは入力に基づくコントロールプラグインなので、ページに入力プラグインを追加し、それにいくつかの属性を追加して、複数選択ボックスを実現します。

<input select2  select2-model="选中的数据" config="数据源" multiple placeholder="提示信息" class="样式" type="text"/>

select2は、コントロールがselect2プラグインであることを示します

複数は複数の選択肢を意味します

構成は、データソースを構成するために使用されます

select2-modelは、選択後にユーザーが送信する変数を指定するために使用されます

注：ここでのデータソースの形式は、data：[{id： "n"、text： "xx"}、{id： "n"、text： "xx"}、{id： "n"、text：「xx」}]

バックグラウンドデータのサポート

select2プラグインを使用して必然的にバックグラウンドからデータをクエリするので、フロントエンドのデータ形式要件についてバックグラウンドをクエリするにはどうすればよいですか？

リストをフロントエンドに戻す，并转换为json
データベースのクエリ時に指定するIDとデータ列のエイリアスを指定します
mybatisでresultTypeを「java.util.Map」として指定します
フロントエンドに戻った後のデータのパッケージ化。例：conf = {data：response};