AnglarJS_select2 组件的使用

显示下拉列表静态数据

1. 引入js

相关文件指路：https://github.com/think2011/angularjs-select2.git

2. 定义静态数据 typeTemplateController.js

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

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

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

4. 效果
   

显示下拉列表动态数据

首先，查看源码所定义的格式

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

 
    select id,name as text from tb_brand
  

2. TbBrandMapper.java

List

3. BrandService.java

	/**
	 * 品牌下拉框数据
	 */
	List

4. BrandServiceImpl.java

	/**
	 * 列表数据
	 */
	public List

5. BrandController.java

	@RequestMapping("/selectOptionList")
	public List

6. brandService.js

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

7. 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};	
			}
		);		
	}

8. type_template.html
   8.1添加JS引入

8.2添加初始化

9. 效果