AnglarJS_select2 组件的使用

最新推荐文章于 2020-10-29 17:53:47 发布

望望打怪兽

最新推荐文章于 2020-10-29 17:53:47 发布

阅读量389

点赞数

本文链接：https://blog.csdn.net/weixin_43367967/article/details/86084083

版权

显示下拉列表静态数据

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

定义静态数据 typeTemplateController.js

$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'中兴'}]};

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

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

在这里插入图片描述

multiple 表示可多选
config用于配置数据来源
select2-model用于指定用户选择后提交的变量

效果

显示下拉列表动态数据

首先，查看源码所定义的格式
在这里插入图片描述

在TbBrandMapper.xml中添加SQL语句配置

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

TbBrandMapper.java

List<Map> selectOptionList();

BrandService.java

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

BrandServiceImpl.java

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

BrandController.java

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

brandService.js

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

typeTemplateController.js
7.1添加依赖注入

 //控制层 
app.controller('typeTemplateController' ,function($scope,$controller   ,typeTemplateService ,brandService){

7.2方法实现

$scope.brandList={data:[]};//品牌列表
	//读取品牌列表
	$scope.findBrandList=function(){
		brandService.selectOptionList().success(
			function(response){
				$scope.brandList={data:response};	
			}
		);		
	}

type_template.html
8.1添加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>

8.2添加初始化

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

效果

望望打怪兽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AnglarJS_select2 组件的使用

显示下拉列表静态数据引入js &lt;link rel="stylesheet" href="../plugins/select2/select2.css" /&gt; &lt;link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" /&gt; &lt;script src=&
复制链接

扫一扫