1

Select2 を先行入力コントロールとして使用しています。以下のコードは、ユーザーが検索語を入力したときに非常にうまく機能します。

ただし、データをページにロードするときは、検索ボックスの値を手動で設定できる必要があります。

理想的には次のようなものです: $scope.selectedProducerId = {id:1, text:"既存のプロデューサー}

ただし、データが取得されていないため、Select2 データ ソースは空です。

したがって、私が本当にできるようにする必要があるのは、新しいデータ配列をデータソースに追加してから、$scope.selectedProducerId を次のように設定することです。 }) そして $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");
        },
    }
}

]);

4

0 に答える 0