1

我有一个奇怪的问题，我似乎无法用我的观点进行故障排除。我正在使用一个指令来生成我的网站的树视图。当我选择一个站点时，我有两个选择框，其中填充了一个站点中的组和站点中的列表。When the options populate, they are all selected. 我检查了元素，它们都有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>

服务和更多的观点

4

1 回答 1

3

This is happening because the ngOptions in the select lists are bounded to the same array as the ngModel. ngModel needs to be a different array that holds only the selected values.

With siteGroups as an example, what is happening is that the select list options are initialized with siteGroups, and they are all selected because the items are in the ngModel (also the siteGroups array). When you click on one of them, it now removes all other items from ngModel except the one you clicked on. Since ngOptions is bounded to the same list, all the non selected options disappear too.

To fix this, create separate array properties on your scope for the selected values in each list.

于 2014-02-25T16:01:56.430 回答