NGOPTIONS selezionate tutte le opzioni per impostazione predefinita e scompaiono le opzioni selezionate

Question

Sto avendo uno strano problema che non riesco a risolvere il problema con la mia vista. Sto usando una direttiva che genera un albero traldo del mio sito web. Quando seleziono un sito, ho due caselle selezionate che popolano con i gruppi in un sito e gli elenchi nel sito. Quando le opzioni popolano, sono tutte selezionate. Ho ispezionato elementi e tutti hanno option="selected" estraneo è che, quando clicco su un'opzione singola, tutti gli altri scompaiono e rimane solo l'opzione selezionata. Ho controllato la fonte nella console Chrome e si è solo il tag di opzione selezionato rimane.

Per EXMAPLE Gli elenchi del sito Selezionare la casella ha più opzioni ma quando ho cliccato su vecchi documenti, gli altri sono tutti scomparsi. Nei gruppi del sito, tutti i gruppi sono già selezionati 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;
        }

    }
);

.

Vista:

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

.

Servizio e altro Vedi

Answer 1

Sta accadendo perché il ngOptions negli elenchi selezionati è limitato allo stesso array del ngModel.ngModel deve essere un array diverso che contiene solo i valori selezionati.

Con siteGroups come esempio, ciò che sta accadendo è che le opzioni di selezione dell'elenco vengono inizializzate con siteGroups e sono tutte selezionate perché gli elementi sono nel ngModel (anche l'array di siteGroups).Quando fai clic su uno di questi, ora rimuove tutti gli altri elementi da ngModel tranne quello che hai cliccato.Poiché ngOptions è limitato allo stesso elenco, tutte le opzioni non selezionate scompaiono anche.

Per risolvere questo problema, creare proprietà array separate sul tuo scopo per i valori selezionati in ciascuna lista.