ngOptions 默认选择所有选项并在选择时消失选项
-
21-12-2019 - |
题
我遇到了一个奇怪的问题,我似乎无法用我的观点来解决问题。我正在使用一个指令来生成我的网站的树视图。当我选择一个站点时,我有两个选择框,其中填充了一个站点中的组和该站点中的列表。当选项填充时,它们全部被选中。我检查过元素,它们都有 option="selected"
奇怪的是,当我单击一个选项时,所有其他选项都会消失,只有选定的选项保留。我已经检查了 Chrome 控制台中的源代码,是的,只保留了选定的选项标签。
例如,“站点列表”选择框有多个选项,但当我单击“旧文档”时,其他选项全部消失。在站点组中,所有组都已被选中:CTRL:
spApp.controller('sitesCtrl',
function sitesCtrl($scope, $q, $modal, UserService, GroupService, SiteService){
//Options for tree controller directive
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
//Returns siteMap for tree controller directive
$scope.siteMap = SiteService.getSiteMap();
//Returns selected sites information: grous, lists, title, url
$scope.showSelected = function(site){
var siteData = SiteService.getSiteInfo(site);
//sets sites title and url in view
$scope.site = site;
$scope.siteGroups = siteData.groups;
$scope.siteLists = siteData.lists;
}
}
);
看法:
<div class="siteGroups">
<label for="siteGroups">Site Groups</label>
<select
multiple
name="siteGroups"
id="siteGroups"
class="siteGroups"
ng-model="siteGroups"
ng-options="g.name for g in siteGroups">
</select>
</div>
<div class="btm1 animated fadeInUp">
<label for="siteLists">Site Lists </label>
<select multiple
id="siteLists"
ng-model="siteLists"
ng-options="l.title for l in siteLists">
</select>
</div>
解决方案
发生这种情况是因为 ngOptions
在选择列表中被限制到与 ngModel
. ngModel
需要是一个仅保存选定值的不同数组。
和 siteGroups
例如,发生的情况是选择列表选项初始化为 siteGroups
, ,并且它们都被选中,因为这些项目位于 ngModel
(还有 siteGroups
大批)。当您单击其中一项时,它现在会删除其中的所有其他项目 ngModel
除了你点击的那一个。自从 ngOptions
绑定到同一个列表,所有未选择的选项也会消失。
要解决此问题,请在范围上为每个列表中的选定值创建单独的数组属性。
不隶属于 StackOverflow