javascript - ngOptions 默认选择所有选项并在选择时消失选项

Question

我遇到了一个奇怪的问题，我似乎无法用我的 View 进行故障排除。我正在使用生成我网站 TreeView 的指令。当我选择一个站点时，我有两个选择框，其中填充了一个站点中的组和该站点中的列表。当选项填充时，它们都被选中。我检查了元素，它们都有 option="selected" 奇怪的是，当我单击一个选项时，所有其他选项都消失了，只有选定的选项仍然存在。我检查了 Chrome 控制台中的源代码，是的，只保留了选定的选项标签。

例如，站点列表选择框有多个选项，但是当我单击旧文档时，其他选项都消失了。在站点组中，所有组都已被选中控制键:

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>

Service and more of the view

Answer 1

发生这种情况是因为选择列表中的 ngOptions 绑定(bind)到与 ngModel 相同的数组。 ngModel 需要是一个仅包含选定值的不同数组。

以 siteGroups 为例，发生的事情是选择列表选项用 siteGroups 初始化，并且它们都被选中，因为项目在 ngModel(也是 siteGroups 数组)。现在，当您点击其中一项时，它会从 ngModel 中删除除您点击的一项之外的所有其他项目。由于 ngOptions 绑定(bind)到同一个列表，因此所有未选中的选项也会消失。

要解决此问题，请在范围内为每个列表中的选定值创建单独的数组属性。