Мультиселект AngularJS-Material не может загрузить более одной предварительно выбранной опции - PullRequest
Новая
       8

Мультиселект AngularJS-Material не может загрузить более одной предварительно выбранной опции

0 голосов
/ 17 января 2019

В моем приложении Angular.JS определен множественный выбор 

<div>
   <label>Scegli una o più keyword</label>
   <div layout="row">
      <md-input-container>
         <label>Cerca...</label>
         <md-select ng-model="newAd.keywords" name="keyword"
            md-on-close="clearSearchTerm()"
            data-md-container-class="selectdemoSelectHeader"
            multiple required>
            <md-optgroup label="Hobby">
               <md-option ng-value="hobby" ng-repeat="hobby in hobbies |
                  filter:searchTerm" ng-selected="{{newAd.keywords.indexOf(hobby) == -1 }}">{{hobby}}</md-option>
            </md-optgroup>
            <md-optgroup label="Team">
               <md-option ng-value="proteam" ng-repeat="proteam in proteams |
                  filter:searchTerm" ng-selected="{{newAd.keywords.indexOf(proteam) == -1 }}">{{proteam}}</md-option>
            </md-optgroup>
            <md-optgroup label="Brand">
               <md-option ng-value="brand" ng-repeat="brand in brands |
                  filter:searchTerm" ng-selected="{{newAd.keywords.indexOf(brand) == -1 }}">{{brand}}</md-option>
            </md-optgroup>
         </md-select>
      </md-input-container>
   </div>
</div>

По сути, это часть модального режима, которая используется для создания объекта, сохраняемого в базе данных. Тот же модал используется повторно для показа деталей этого объекта.
Бренды, протеамы и хобби - это списки (которые содержат только строки), которые загружаются из серверной части. Когда мне нужно открыть детали для редактирования некоторой информации, я исключаю, что все значения списков загружаются с теми, которые были ранее выбраны, выбраны.
Это не происходит : вместо этого только один элемент отображается как выбранный.
Способ указания AngularJS, выбирать ли элемент или нет, показан в теге ng-selected с этим выражением AngularJS. Предположим, что у ProTeams есть значения ['Lakers', 'NBA', 'Red Sox']: если я выберу первые два, то через визуализированный HTML-код я увижу, что выбранный ng помечен как true для «Лейкерс» и «НБА», но будет выбран только один.
Вот так я рендерил всю страницу 

$scope.openUpdateModal = function (selectedAd) {

    debugger;
    //console.log(selectedUser);
    function DialogController(scope, $mdDialog) {
        scope.newAd = selectedAd;
        scope.newImage = selectedAd.bannerImage;

        AdvService.populateSelect().then((res) => {
            scope.brands = res.Brand;
            scope.proteams = res.ProTeam;
            scope.hobbies = res.Hobby;
            scope.selezioni = ['Partite','Eventi','Giocatori'];
        });

        AdvService.getCountries().then((res) => {
            debugger;
            scope.countries = res.message;
        });

        scope.getRegioni = function() {
            debugger;
            AdvService.getRegions(scope.newAd.chosenCountry).then((res) => {
                debugger;
                scope.regions = res.message;
            });
        }

        scope.getCities = function() {
            debugger;
            AdvService.getCities(scope.newAd.chosenRegion).then((res) => {
                debugger;
                scope.cities = res.message;
            });
        }

        scope.cancel = function () {
            $mdDialog.cancel();
        };

        scope.confirm = function () {
            AdvService.updateAd(scope.newAd).then(function () {
                $mdDialog.show(
                    $mdDialog.alert()
                        .title('Modifica')
                        .textContent("Ad correttamente modificata")
                        .ok('OK')
                );
                $scope.search();
            }, function (err) {
                $mdDialog.show(
                    $mdDialog.alert()
                        .title('Modifica')
                        .textContent(err)
                        .ok('OK')
                );
            })

            $mdDialog.hide();
        }

    };

    $mdDialog.show({
        controller: DialogController,
        templateUrl: 'templates/advertisement-dialog.html',
        parent: angular.element(document.body),
        clickOutsideToClose: true
    }).then(function () { }, function () { });


}

Что мне не хватает? Обратите внимание, что если я просто закрою модальное и затем снова открою его, я получу правильное поведение

...