欢迎使用select2 组件

在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用select2 组件来完成。
例：在这里插入图片描述查看源代码：

 <h4>3. 支持自定义配置及多选（与select2原生的配置方式一致）</h4>
 <span class="text-muted">ng-model:</span> {{ c }}
<br/>
<span class="text-muted">select2-model:</span> {{ cS2 | json }}
<input select2 ng-model="c" select2-model="cS2" config="config3" multiple placeholder="支持多选哦" class="form-control" type="text"/>
<br/>
<button ng-click="cS2 = [{id:3,text:'invalid'},{id:4,text:'wontfix'}]" class="btn btn-success btn-sm pull-right">设置数据</button>
<span class="clearfix"></span>
<hr/>

显示品牌下拉列表（静态）

（1）修改 type_template 引入JS

    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/angular-select2.js">  </script>

（2）修改typeTemplateController.js ，定义品牌列表静态数据

    $scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//品牌列表

（3）在type_template.html 用select2组件实现多选下拉框

<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌（可多选）" class="form-control" type="text"/>

select2内置标签，表示使用select2下拉组件
multiple 表示可多选
Config用于配置数据来源
select2-model用于指定用户选择后提交的变量，JSON格式
如果使用ng-model的话，用户选择后提交的变量为ID的值，现在不使用
最终实现效果如下：
在这里插入图片描述

显示品牌下拉列表（动态）

我们现在让这个下拉列表的数据从数据库中提取，修改后端代码
（1）在dao 工程中，在TbBrandMapper.xml中添加SQL语句配置

  <select id="selectOptionList"  resultType="java.util.Map" >
    select id,name as text from tb_brand
  </select>

（2）在dao层的TbBrandMapper中添加方法定义

  List<Map> selectOptionList();

（3）修改sellergoods-interface层的BrandService.java，增加方法定义

	/**
	 * 品牌下拉框数据
	 */
	List<Map> selectOptionList();

（4）修改sellergoods-service的BrandServiceImpl.java，增加方法

	/**
	 * 列表数据
	 */
	public List<Map> selectOptionList() {
		return brandMapper.selectOptionList();
	}

（5）修改manager-web层的BrandController.java

	@RequestMapping("/selectOptionList")
	public List<Map> selectOptionList(){
		return brandService.selectOptionList();
	}

（6）修改manager-web的brandService.js

//下拉列表数据
	this.selectOptionList=function(){
		return $http.get('../brand/selectOptionList.do');
	}

（7）修改manager-web的typeTemplateController.js
因为我们在模板控制层中需要使用品牌服务层的方法，所以需要添加依赖注入brandService

 //控制层 引入service服务
app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService ,brandService){

使用品牌服务方法实现查询，结果赋给变量

$scope.brandList={data:[]};//品牌列表,必须以此格式
	//读取品牌列表
	$scope.findBrandList=function(){
		brandService.selectOptionList().success(
			function(response){
				$scope.brandList={data:response};	
			}
		);		
	}

（8）修改type_template.html ，添加JS引入

<script type="text/javascript" src="../js/base_pagination.js">  </script>
<script type="text/javascript" src="../js/service/typeTemplateService.js">  </script>
<script type="text/javascript" src="../js/service/brandService.js">  </script>
<script type="text/javascript" src="../js/controller/baseController.js">  </script>
<script type="text/javascript" src="../js/controller/typeTemplateController.js">  </script>

特别注意一下，JS引入的位置，要在typeTemplateController.js之前，因为该控制器要使用到它
（9）修改type_template.html ，添加初始化findBrandList方法

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="typeTemplateController" ng-init="findBrandList()">

规格下拉列表

在这里插入图片描述

使用select2 组件获取下拉列表数据

获取下拉列表数据

欢迎使用select2 组件

显示品牌下拉列表（静态）

显示品牌下拉列表（动态）

规格下拉列表

猜你喜欢