AngularJS+Select2實現多選框

Select2是一款下拉框美化插件chosen的擴展，它能讓丑陋的、很長的select選擇框變的更好看、更方便，支持搜索，遠程數據集，以及無限滾動的結果。

效果預覽

有了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以后，因為其使用了app。

在前端頁面中使用select2

select是基於input的一個控件插件，所以在頁面上添加一個input插件，在其上添加幾個屬性即可實現多選框。

<input select2  select2-model="選中的數據" config="數據源" multiple placeholder="提示信息" class="樣式" type="text"/>

select2 表示該控件為select2插件

multiple 表示可多選

Config用於配置數據來源

select2-model用於指定用戶選擇后提交的變量

注意：這里的數據源的格式必須為data:[{id:"n",text:"xx"},{id:"n",text:"xx"},{id:"n",text:"xx"}]

后台數據支持

我們使用select2插件難免要從后台查詢數據，那么對於前端的數據格式要求我們后台應該怎么查詢呢？

1. 向前端返回List
2. 在查詢數據庫時將id和要指定的數據列指定別名
3. 在mybatis中將resultType指定為"java.util.Map"
4. 返回到前端后數據包裝，例如conf= {data: response};