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);
};
}
Forse dovresti impostare un plunker http://plnkr.co/. – maxisam
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 –