AngularJS + Select2 implementar cuadro de selección múltiple

Select2 es una extensión del complemento de embellecimiento del cuadro desplegable elegido, puede hacer que el cuadro de selección de selección feo y muy largo se vea mejor y más conveniente, admite búsquedas, conjuntos de datos remotos y resultados de desplazamiento infinito.

Vista previa del efecto

Con select2, puede implementar dicho cuadro desplegable

Introducir recursos

Al igual que todos los complementos js, select2 también necesita introducir algunos recursos. Aquí se proporciona una versión en línea y una versión local. Puede presentarla según sus necesidades. Código de extracto de la versión local : pzik

Versión en línea:

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

Nota: El archivo select2-angular.js debe introducirse después del módulo ng porque usa la aplicación.

Use select2 en la página de inicio

select es un complemento de control basado en la entrada, por lo tanto, agregue un complemento de entrada en la página, agregue algunos atributos para lograr un cuadro de selección múltiple.

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

select2 indica que el control es un complemento select2

múltiples significa múltiples opciones

Config se usa para configurar la fuente de datos

select2-model se usa para especificar las variables enviadas por el usuario después de la selección

Nota: El formato de la fuente de datos aquí debe ser datos: [{id: "n", texto: "xx"}, {id: "n", texto: "xx"}, {id: "n", texto: "xx"}]

Soporte de datos de fondo

Usamos el complemento select2 para consultar inevitablemente los datos del fondo, entonces, ¿cómo deberíamos consultar el fondo para los requisitos de formato de datos front-end?

Lista de retorno al frente，并转换为json
Especifique el alias para la identificación y la columna de datos que se especificarán al consultar la base de datos
Especifique el resultType como "java.util.Map" en mybatis
Empaquetado de datos luego de regresar al front end, por ejemplo conf = {data: response};