2012-11-04 22 views
5

Associazione bidirezionale con AngularJS + Angular-UI Select2 con funzionalità Ajax.Associazione bidirezionale con interfaccia utente angolare Select2 con funzionalità Ajax

Ho creato una direttiva per implementare il comportamento Ajax a discesa di Select2 in modo generico: - (Richiede pochi attributi per ottenere formatResult, formatSelection methods to call e url).

Il mio problema è come caricare il valore in "Modalità di modifica", il valore selezionato dal menu a discesa viene ricevuto nel metodo di selezione dei formati, ma durante il caricamento dello schermo, voglio caricare il menu a discesa dallo stesso valore a cui è associato. Esempio: -

<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); 
    }; 

} 
+0

Forse dovresti impostare un plunker http://plnkr.co/. – maxisam

+0

impostare un plunkr è difficile per me, dato che non so come emulare ajax, potrei menzionare meglio il mio problema qui: https://github.com/ivaynberg/select2/issues/560 –

risposta

0

Fisso infine: - Come ho continuato oggetto di configurazione di portata [attrs [ "uiSelect2"]], ho chiamato metodo .ajax.data dell'oggetto configurazione sopra ogni volta che carico dati.

Problemi correlati