AngularJS材质多选无法加载多个预选选项

时间:2019-01-17 17:01:17

标签: javascript angularjs select angularjs-material

我在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-selected标记为 true < / strong>(“湖人”和“ NBA”),但只有一个会被选中。
这就是我渲染所有页面的方式

$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 () { });


}

我想念什么? 请注意,如果我只关闭模态然后重新打开它,我将获得正确的行为

0 个答案:

没有答案