显示品牌下拉列表(静态)
(1)修改 type_template.html 引入JS
<!-- slect2插件--> |
注意:base_pagination.js一定要在angular-select2.js之前导入,不然报app not define!
(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"/> |
multiple 表示可多选
Config用于配置数据来源
select2-model用于指定用户选择后提交的变量
最终实现效果如下:
5.2.3 后端数据支撑
我们现在让这个下拉列表的数据从数据库中提取,修改后端代码
(1)youlexuan-dao 工程 ,在TbBrandMapper.xml中添加SQL语句配置
<select id="selectOptionList" resultType="java.util.Map" > select id,name as text from tb_brand </select> |
(2)在youlexuan-dao 的TbBrandMapper中添加方法定义
List<Map> selectOptionList(); |
(3)修改youlexuan-sellergoods-interface 的BrandService.java,增加方法定义
/** * 品牌下拉框数据 */ List<Map> selectOptionList(); |
(4)修改youlexuan-sellergoods-service的BrandServiceImpl.java,增加方法
/** * 列表数据 */ public List<Map> selectOptionList() { return brandMapper.selectOptionList(); } |
(5)修改youlexuan-manager-web的BrandController.java
@RequestMapping("/selectOptionList") public List<Map> selectOptionList(){ return brandService.selectOptionList(); } |
(6)修改youlexuan-manager-web的brandService.js
//下拉列表数据 this.selectOptionList=function(){ return $http.get('../brand/selectOptionList.do'); } |
(7)修改youlexuan-manager-web的typeTemplateController.js
因为我们在模板控制层中需要使用品牌服务层的方法,所以需要添加依赖注入
//控制层 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 ,添加初始化
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="typeTemplateController" ng-init="findBrandList()"> |