ngOptions hat standardmäßig alle Optionen ausgewählt und Optionen beim Auswählen ausgeblendet

Question

Ich habe ein seltsames Problem, das ich mit meiner Ansicht scheinbar nicht beheben kann.Ich verwende eine Direktive, die eine Baumansicht meiner Website generiert.Wenn ich eine Site auswähle, stehen mir zwei Auswahlfelder zur Verfügung, die mit den Gruppen auf einer Site und den Listen auf der Site gefüllt werden.Wenn die Optionen ausgefüllt sind, sind sie alle ausgewählt.Ich habe Elemente inspiziert und das haben sie alle option="selected" Merkwürdiger ist, dass, wenn ich auf eine einzelne Option klicke, alle anderen verschwinden und nur die ausgewählte Option übrig bleibt.Ich habe die Quelle in der Chrome-Konsole überprüft und ja, nur das ausgewählte Options-Tag bleibt übrig.

Beispielsweise verfügt das Auswahlfeld „Site-Listen“ über mehrere Optionen, aber als ich auf „Alte Dokumente“ klickte, verschwanden alle anderen.In den Standortgruppen werden bereits alle Gruppen ausgewählt: Strg:

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;
        }

    }
);

Sicht:

    <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 und mehr Aussicht

Answer 1

Dies geschieht, weil die ngOptions in den Auswahllisten sind an dasselbe Array gebunden wie die ngModel. ngModel muss ein anderes Array sein, das nur die ausgewählten Werte enthält.

Mit siteGroups Beispielsweise werden die Auswahllistenoptionen mit initialisiert siteGroups, und sie sind alle ausgewählt, da sich die Elemente in der befinden ngModel (auch der siteGroups Array).Wenn Sie auf eines davon klicken, werden nun alle anderen Elemente entfernt ngModel außer dem, auf den Sie geklickt haben.Seit ngOptions an dieselbe Liste gebunden ist, verschwinden auch alle nicht ausgewählten Optionen.

Um dies zu beheben, erstellen Sie in Ihrem Bereich separate Array-Eigenschaften für die ausgewählten Werte in jeder Liste.