Question

我使用Select2作为预先控制。当用户输入搜索词时，下面的代码非常有效。

但是，在将数据加载到页面时，我需要能够手动设置搜索框的值。

理想情况如下：$ scope.selectedProducerId = {id：1，text：＆＃34; Existing producer}

但是，由于未检索到任何数据，因此Select2数据源为空。

所以我真正需要做的是向数据源添加一个新的数据数组，然后设置$ scope.selectedProducerId，如：$ scope.producersLookupsSelectOptions.addNewData（{id：1，text：＆＃34;现有生产者}）然后 $ scope.selectedProducerId = 1;

研究这个我已经看到了使用initSelection（）的各种建议，但是我无法看到如何使其工作。

我还试图设置createSearchChoice（term），但该术语没有出现在输入框中。

如果有任何帮助，我将非常感激。

由于

这是html

    <div class="col-sm-4">
        <input type="text" ui-select2="producersLookupsSelectOptions" ng-    model="selectedProducerId" class="form-control" placeholder="[Produtor]" ng-change="selectedProducerIdChanged()"/>
    </div>

这是控制器

angular.module("home").controller("TestLookupsCtrl", [
"$scope", "$routeParams", "AddressBookService",
function($scope, $routeParams, AddressBookService) {
    $scope.producersLookupsSelectOptions = AddressBookService.producersLookupsSelectOptions();        
}
]);

这是服务：

angular.module("addressBook").service("AddressBookService", [
"$http", "$q", function($http, $q) {
    var routePrefix = "/api/apiAddressBook/";

    //var fetchProducers = function(queryParams) {
    //    return $http.get(routePrefix + "GetClientsLookup/" + queryParams.data.query).then(queryParams.success);
    //};


    var _getSelectLookupOptions = function(url, minimumInputLength, idField, textField) {
        var _dataSource = [];
        var _queryParams;
        return {
            allowClear: true,
            minimumInputLength: minimumInputLength || 3,
            ajax: {
                data: function(term, page) {
                    return {
                        query: term
                    };
                },
                quietMillis: 500,
                transport: function(queryParams) {
                    _queryParams = queryParams;
                    return $http.get(url + queryParams.data.query).success(queryParams.success);
                },
                results: function(data, page) {
                    var firstItem = data[0];
                    if (firstItem) {
                        if (!firstItem[idField]) {
                            throw "[id] " + idField + " does not exist in datasource";
                        }

                        if (!firstItem[textField]) {
                            throw "[text] " + textField + " field does not exist in datasource";
                        }
                    }

                    var arr = [];
                    _.each(data, function(returnedData) {
                        arr.push({
                            id: returnedData[idField],
                            text: returnedData[textField],
                            data: returnedData
                        });
                    });
                    _dataSource = arr;
                    return { results: arr };
                }
            },
            dataSource: function() {
                return _dataSource;
            },
            getText: function (id) {
                if (_dataSource.length === 0) {
                    throw ("AddressBookService.getText(): Since the control was not automatically loaded the dataSource has no content");
                }
                return _.find(_dataSource, { id: id }).text;
            }
            //initSelection: function(element, callback) {
            //    callback($(element).data('$ngModelController').$modelValue);
            //},
            //createSearchChoice:function(term) {
            //    return term;
            //},
            addNewData:function(data) {
                this.ajax.results(data,1);

        };
    };

    return {
            producersLookupsSelectOptions: function() {
            var url = routePrefix + "GetClientsLookup/";
            return _getSelectLookupOptions(url, 2, "Id", "Name");
        },
    }
}

]）;

当select2设置为<input />以加载远程数据时，如何手动将数据源添加到Angularjs-select2？

0 个答案: