AngularJS+Select2实现多选框

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};