靜態下拉列表
修改 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:1,text:'聯想'},{id:2,text:'華為'},{id:3,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=0;i<jsonObj.length;i++){ if(i>0){ 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()">