AngularJS + Select2 implement multi-select box

Select2 is an extension of the drop-down box beautification plugin choosen, it can make the ugly, very long select selection box look better and more convenient, supports search, remote data sets, and infinite scrolling results.

Effect preview

With select2, you can implement such a drop-down box

Introduce resources

Like all js plugins, select2 also needs to introduce some resources. An online version and a local version are provided here. You can introduce it according to your needs. Local version Extract code: pzik

Online version:

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

Note: The select2-angular.js file must be introduced after the ng-module because it uses the app.

Use select2 in the front-end page

select is a control plug-in based on input, so add an input plug-in on the page, add a few attributes on it to achieve a multi-select box.

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

select2 indicates that the control is a select2 plugin

multiple means multiple choices

Config is used to configure the data source

select2-model is used to specify the variables submitted by the user after selection

Note: The format of the data source here must be data: [{id: "n", text: "xx"}, {id: "n", text: "xx"}, {id: "n", text: "xx"}]

Background data support

We use the select2 plugin to inevitably query the data from the background, so how should we query the background for the front-end data format requirements?

Return List to the front end，并转换为json
Specify the alias for the id and the data column to be specified when querying the database
Specify the resultType as "java.util.Map" in mybatis
Data packaging after returning to the front end, for example conf = {data: response};