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("失敗");
                                 
                               })
                           }
                       }
                   };
               }])


















發佈了34 篇原創文章 · 獲贊 7 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章