angularjs - 带有 Ajax 功能的 Angular-UI Select2 的两种方式数据绑定(bind)

标签 angularjs jquery-select2 angular-ui

AngularJS + Angular-UI Select2 与 Ajax 功能的两种方式数据绑定(bind)。

我创建了一个指令来以通用方式实现 Select2 下拉 Ajax 行为:-(它需要很少的属性来获取 formatResult、调用 formatSelection 方法和 url)。

我的问题是如何在“编辑模式”中加载值,从下拉列表中选择的值是在格式选择方法中接收的,但是在加载屏幕时,我想从绑定(bind)的相同值加载下拉列表。
例子:-

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

关于angularjs - 带有 Ajax 功能的 Angular-UI Select2 的两种方式数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13218116/

相关文章:

angularjs - Angular.ui 引导评级中的自定义图像

twitter-bootstrap - AngularUI/Bootstrap 是否支持 twitter-bootstrap 3?

angularjs - ng-repeat 中的 Angular UI 工具提示未关闭

javascript - 如何与多个用户一起运行 Protractor 套件

javascript - 网站 API : separate backend and frontend with an API

javascript - angular.bootstrap 和 angular ui-router 不启动 Controller

javascript - 将选项添加到我的 Select2

javascript - Select2 占位符问题

javascript - AngularJS 使用作用域变量解析 JSON 数据

javascript - jQuery 插件 select2 有没有办法保留每个选择选项的类?