select2插件的使用

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

注意：

在引入的时候

	<script type="text/javascript" src="../js/angular-select2.js">  </script>

必须要在该js之后，因为我创建的模型的时候是在下面的时候创建的，然而上面的select 2也是利用了里面的app来创建的，所以要这样引用

	<script type="text/javascript" src="../js/base_pagination.js"></script>

base_pagination.js：

angular-select2.js：

2、在html文件中使用

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

注释：
	select2:表示使用select2下拉框
    config="brandList" ：表示数据来源，后面的brandList表示在controller层定义的数据
    select2-model="entity.brandIds"：选择后的数据会提交到该变量
    multiple ：支持多选
    后面的是样式

    

最后结果展示：

以上实例中数据的来源是被写死了的，现在写一下怎么从后台中获取数据

Mapper.xml:

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

Mapper.java:

    List<Map> selectOptionList();

interface：

	@Override
	public List<Map> selectOptionList() {

		return brandMapper.selectOptionList();
	}

Controller：

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

anluar-service：

  this.selectOptionList = function () {
        return $http.get('../brand/selectOptionList.do');
    }

angular-Controller:

$scope.findBrandList = function(){
		brandService.selectOptionList().success(
			function (response) {
				$scope.brandList = {data:response};
            }
		)
	}

问题：

 这个报错是angular的控制层中没有对其select2的数据查询的代码导致的，解决方法，添加如下代码

$scope.brandList={data:[]};