select2的简单使用

静态下拉列表

修改 type_template.html 引入JS

<!-- slect2插件-->

   <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 src="../plugins/angularjs/angular.min.js"></script>

<script src="../js/base_pagination.js"></script>

<!-- 导入select2-angula-->

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

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<script src="../js/service/typeTemplateService.js"></script>

<script src="../js/controller/baseController.js"></script>

<script src="../js/service/brandService.js"></script>

<script src="../js/controller/typeTemplateController.js"></script>

注意：base_pagination.js一定要在angular-select2.js之前导入，不然报app not define！

修改typeTemplateController.js ，定义品牌列表数据

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

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

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

multiple 表示可多选

Config用于配置数据来源

select2-model用于指定用户选择后提交的变量

最终实现效果如下：

动态下拉列表

1：从后端获取数据支撑

我们现在让这个下拉列表的数据从数据库中提取，修改后端代码获得数据(此处只展示Controller)

@RequestMapping("/selectOptionList")

public List<Map> selectOptionList(){

    return brandService.selectOptionList();

}

2：修改youlexuan-manager-web的brandService.js

//下拉列表数据

this.selectOptionList=function(){

    return $http.get('../brand/selectOptionList.do');

}

3：修改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};

　　　　　　}

　　　　);

　　}

// 定义方法：获取JSON字符串中的某个key对应值的集合

    $scope.jsonToString = function(jsonStr,key){

        // 将字符串转成JSOn:

        var jsonObj = JSON.parse(jsonStr);

        var value = "";

        for(var i=;i<jsonObj.length;i++){

            if(i>){

                value += ",";

            }

            value += jsonObj[i][key];

        }

        return value;

    }

4：修改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之前，因为该控制器要使用到它

5：修改type_template.html ，添加初始化

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