我在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 () { });
}
我想念什么? 请注意,如果我只关闭模态然后重新打开它,我将获得正确的行为