ngOptions sélectionné toutes les options par défaut et la disparition d'options sur sélectionner

StackOverflow https://stackoverflow.com//questions/22018732

Question

J'ai un étrange problème je n'arrive pas à résoudre avec mon point de vue.Je suis à l'aide d'une directive qui génère une arborescence de mon site web.Lors de la sélection d'un site, j'ai deux listes de sélection qui peuplent avec les groupes en un seul site, et les listes dans le site.Lorsque les options remplir, ils sont tous sélectionnés.J'ai inspecté les éléments et ils ont tous option="selected" Étrange, c'est que, lorsque je clique sur une seule option, tous les autres disparaissent et seule l'option sélectionnée reste.J'ai vérifié la source de Chrome console et oui seulement si l'option sélectionnée étiquette reste.

enter image description here

Pour exemple le Site des Listes de sélectionner la zone dispose de plusieurs options, mais quand j'ai cliqué sur les Vieux documents, ils ont d'autres ont disparu.Dans le Site des Groupes, tous les groupes sont déjà sélectionnés 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;
        }

    }
);

Vue:

    <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 de et plus de la vue

Était-ce utile?

La solution

Cela se produit parce que le ngOptions dans les listes de sélection sont bornées à le même tableau que l' ngModel. ngModel doit être un autre tableau qui ne contient que les valeurs sélectionnées.

Avec siteGroups comme un exemple, ce qui se passe, c'est que la liste de sélection options sont initialisés avec les siteGroups, et ils sont tous sélectionnés parce que les éléments sont dans le ngModel (aussi la siteGroups array).Lorsque vous cliquez sur l'un d'eux, il supprime tous les autres éléments de ngModel à l'exception de celui sur lequel vous avez cliqué.Depuis ngOptions est bornée à la même liste, les options sélectionnées disparaissent trop.

Pour résoudre ce problème, créez des propriétés de la matrice à votre portée pour les valeurs sélectionnées dans chaque liste.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top