为ajax（远程数据）select2选择多个选项

Question

我使用了select2 v4和ajax（远程数据），我想在编辑屏幕中显示所选的选项。这是我尝试过的。

<select class="form-control empty asd" name="size_variant" ng-model="size_variant" jq-select2-multi data-value="7" data-text1="a,b,c" data-value1="1,2,3" multiple data-method="/product/retrive-size-list"
      ng-required="showVariant" required>
</select>

指令代码：

app.directive('jqSelect2Multi', ["$timeout", "$compile","APP",function($timeout, $compile,APP) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs,ctrl) {
            //var currValue = ctrl.$modelValue;
            var method = element.data('method');
            //$timeout(function() {
            console.log("element",element)
                element.select2({
                    theme:"material",
                    dropdownAutoWidth: true,
                    width: 'auto',
                    tags: true,
                    tokenSeparators: [',', ' '],
                    ajax: {
                        //url: APP.API + '/user-permission/retrieve-permission-list',
                        url: APP.API + method,
                        dataType: 'json',
                        type: "GET",
                        data: function(term, page) {
                            console.log('term',term)
                            return {
                                term: term,
                                page_limit: 5,
                            };
                        },  
                        processResults: function(data, page) { 
                            return {results: data.data};
                        }
                    },
                    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                    templateResult: formatRepo,
                    templateSelection: formatRepoSelection,
                    createTag: function (params) { 
                        return {
                            id: params.term,
                            name: params.term,
                            newOption: true
                        }
                    },
                    insertTag: function (data, tag) { 
                        // Insert the tag at the end of the results
                        data.push(tag);
                    }
                });
           // }); 

           function formatRepo (repo) { 
              if (repo.loading) {
                return repo.text;
              }

              var markup = "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__title'>" + repo.name + "</div>"; 

              return markup;
            } 

            function formatRepoSelection (repo) {  
              return repo.name || repo.text;
            }



            scope.$watch(attrs.ngModel, function(value) {
                var select_value = element.data('value');
                var select_text = element.data('text');
                debugger;
                if(!angular.isUndefined(value) && value == select_value)
                {
                    debugger;

                    var select_value1 = element.data('value1'); // 1,2,3
                    var select_text1 = element.data('text1'); // a,b,c

                    var select_dropdown = element;

                    var data=[];
                    var sv = select_value1.split(',');
                    var st = select_text1.split(',');
                    for(var i=0;i<sv.length;i++){
                        data.push({
                            name:st[i],
                            id:sv[i]
                        }); 

                        var option = new Option(st[i], sv[i], true, true);
                        select_dropdown.append(option).trigger('change');
                    } 

                    // var data={
                    //     name:select_text,
                    //     id:select_value
                    // }

                    select_dropdown.trigger({
                      type: 'select2:select',
                      params: {
                        data: data
                      }
                    });   


                    // manually trigger the `select2:select` event

                }else{ 
                    if(angular.isUndefined(value)){
                        element.find('option').remove();
                    }
                }

            });



        }  
    };
}])

它显示在下拉选项中选中，但不在视图中。

以下是代码：

<select class="form-control empty asd ng-pristine ng-untouched ng-valid select2-hidden-accessible ng-valid-required ng-not-empty" name="size_variant" ng-model="size_variant" jq-select2-multi="" data-value="7" data-text1="a,b,c" data-value1="1,2,3" multiple="" data-method="/product/retrive-size-list" ng-required="showVariant" tabindex="-1" aria-hidden="true" required="required">                                    
    <option value="1" selected="">a</option>
    <option value="2" selected="">b</option>
    <option value="3" selected="">c</option>
</select>