双向数据绑定，带有Ajax功能的Angular-UI Select2

双向数据绑定，带有Ajax功能的AngularJS + Angular-UI Select2。双向数据绑定，带有Ajax功能的Angular-UI Select2

我创建了一个指令，以通用方式实现Select2下拉Ajax行为： - （它需要几个属性来获取formatResult，formatSelection方法调用和url）。

我的问题是如何加载“编辑模式”中的值，从下拉列表中选择的值是在formatselection方法中收到的，但是在加载屏幕时，我想从它绑定到的相同值加载下拉列表。实施例： -

<input type="hidden" for="part" class="bigdrop" style="width: 250px" formatresult="partFormatResult" formatselection="partFormatSelection" aurl="/api/Part" search-drop-down ui-select2="configPartSelect2" ng-model="product.SalesPart" data-placeholder="Select Part" ng-change="onPartSelect();" /> 

    Directive Code 

    One23SRCApp.directive('searchDropDown', ['$http', function (http) { 
     return function (scope, elm, attrs) { 
      var raw = elm[0]; 
      var fetchFuncName = "fetch" + attrs["uiSelect2"]; 
      console.log("Directive load pat " + scope[attrs["ngModel"]]); 
      scope[fetchFuncName] = function (queryParams) { 
       var result = http.get(queryParams.url, queryParams.data).success(queryParams.success); 
       result.abort = function() { 
        return null; 
       }; 
       return result; 
      }; 


      scope[attrs["uiSelect2"]] = { 
       minimumInputLength: 3, 
       initSelection: scope[attrs["initselection"]], 
       ajax: { 
        url: attrs["aurl"], 
        data: function (term, page) { 
          return { params: { isStockable: true, query: term, pageNo: page, pageSize: 20 } }; 
        }, 
        dataType: 'json', 
        quietMillis: 100, 
        transport: scope[fetchFuncName], 
        results: function (data, page) { 
         var more = (page * 20) <= data.length; // whether or not there are more results available 
         return { results: data, more: more }; 
        } 
       }, 
       formatResult: scope[attrs["formatresult"]], 
       formatSelection: scope[attrs["formatselection"]], 
       dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
      }; 

      return { bind: attrs["ngModel"] }; 
     }; 

    }]); 

//inside controller- 
after loading of data 
    $("#partDD").select2("val", product.SalesPart); 
//$scope.partInitSelection definition. 
    $scope.partInitSelection = function (element, callback) { 
     if (! $scope.PartList) { 
      $scope.PartList = [$scope.product.SalesPart]; 
     } else { 
      $scope.PartList.push($scope.product.SalesPart); 
     } 
     callback($scope.product.SalesPart); 
    }; 

}

来源

2012-11-04 Sutikshan Dubey

也许你应该设置一个plunker http://plnkr.co/。 – maxisam

设置一个plunkr对我来说很困难，因为我不知道如何模拟ajax，可能我在这里提到了我的问题 - https://github.com/ivaynberg/select2/issues/560 –

固定它终于： - 正如我在范围保持配置对象[ATTRS [ “uiSelect2”]]，我每个I加载时间称为上述配置对象的.ajax.data方法数据。

scope[attrs["uiSelect2"]].ajax.results(product.SalesPart.text, 1);

来源

2012-11-08 15:08:29

双向数据绑定，带有Ajax功能的Angular-UI Select2

回答

相关问题