angularJS select2 多选功能

直接上代码解释: 

 <select   form-select2-help   class="form-control select2"    select-num-format=""
     ng-model="${v_model_name}.shoppeIds"  multiple="multiple" style="width: 100%"  name="select_shoppeIds"
     ng-change="selectAreaByShoppeIds(${v_model_name}.shoppeIds)">

     <option  ng-repeat="item in shoppeData" ng-selected=""  value="{{item.code}}" >{{item.code}}</option>
 </select>

界面用ftl格式写的：

1. form-select2-help 指令引入select2标签

2. multiple 多选标签

3. ng-change 用于级联效果，看业务需求而定

4. ng-repeat 界面异步加载下拉框数据 shoppeData

5. ng-seleted 设置选中状态

6. value,保存后，后台拿到的参数字段

7. {{item.code}} code是界面展示数据的字段

下面是angularJS :

CRMIndexApp
.directive("createContractDirective", ["commonCrudUtilService", "$sce", "$timeout", 
                  function (commonCrudUtilService, $sce, $timeout) {
                      return { scope: false, restrict: "ACE", require: "?^containerContent", compile: function (element, attributes) { 
                          return { 
                              pre: function preLink($scope, element, attributes, ctrs) {
                                  }, 
                              post: function postLink($scope, element, attrs, ctrs) { 
                                  /** * 刷新滚动监听事件 */
                                  $scope.refreshSpy = function () {
                                      $('.zero-new-box').scrollspy('refresh'); 
                                      
                                  } 
                                  
                              } 
                              
                          }; 
                          
                      }, controller: function ($scope, $element, $attrs) {
                          /** * 更新事件 */
                          $scope.udpateContractInfo = function (e) { 
                              var ids = $scope.getSelectedIds();
                              if (ids.length != 1) {
                                  PWindow.alert("请选择一条数据 ") return; 
                                  
                              } 
                              var submiturl = ROOT_CONFIG.BASE_PATH + "contractinfo/" + ids[0]; 
                              commonCrudUtilService.get($scope, {}, submiturl, function (data) { 
                                  console.log(data);
                                  $scope['ContractInfo'] = data.content; 
                                  var contractInfoData = data.content; //根据楼层id查询铺位信息 
                                  var floorId = data.content.floorId; 
                                  if (floorId != undefined && floorId != null && floorId != '') { 
                                      commonCrudUtilService.get( $scope, {"floorId": floorId}, ROOT_CONFIG.BASE_PATH + "mis/shoppeinfo/list", function (data) {
                                                //对option 下拉框数据赋值
                                               $scope.shoppeData = data.content;

                                           }
                                       )
                                   }

注意下面几行是重点：

               $timeout(function () {
                            //初始化select2()
                              $('select[name="select_shoppeIds"]').select2();
                            //对之前新增的数据，进行输入框赋值
                              $('select[name="select_shoppeIds"]').val( contractInfoData.shoppeIds).trigger('change');
                                   }, 300)
                               }, function () {
                                   PWindow.alert("失败");
                                 
                               })
                           }
                       }
                   };
               }])