[英]Two way Databinding with Angular-UI Select2 with Ajax functionality
Two way Databinding with AngularJS + Angular-UI Select2 with Ajax functionality. 使用带有Ajax功能的AngularJS + Angular-UI Select2的双向数据绑定。
I created a directive to implement Select2 dropdown Ajax behavior in Generic way:- (It requires few attributes to get formatResult, formatSelection methods to call, and url). 我创建了一个指令,以通用的方式实现Select2下拉式Ajax行为: - (它需要很少的属性来获取formatResult,formatSelection方法来调用和url)。
My problem is how to load value in "Edit Mode", selected value from dropdown is received in formatselection method, but while loading the screen, I want to load the dropdown from the same value to which it is binded. 我的问题是如何在“编辑模式”中加载值,从格式选择方法接收下拉列表中的选定值,但在加载屏幕时,我想从绑定的相同值加载下拉列表。 Example:-
例:-
<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);
};
}
最后解决了这个问题: - 由于我将配置对象保留在范围[attrs [“uiSelect2”]]中,每次加载数据时都会调用上面配置对象的.ajax.data方法。
scope[attrs["uiSelect2"]].ajax.results(product.SalesPart.text, 1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.