ngOptions selecionado todas as opções por padrão e desaparecendo opções de escolha
-
21-12-2019 - |
Pergunta
Eu estou tendo um estranho problema que eu não consigo resolver com meu ponto de vista.Eu estou usando uma diretiva que gera uma treeview do meu site.Quando eu selecionar um site, eu tenho duas caixas de seleção que preencher com os grupos em um site e a lista no site.Quando as opções preencher, todos eles são selecionados.Eu tenho inspecionado elementos e todos eles têm option="selected"
Estranho é que, quando eu clicar em uma única opção, todos os outros desaparecem e apenas a opção selecionada permanece.Verifiquei a fonte na console do Chrome e sim apenas a opção selecionada marca permanece.
Por exemplo, o Site Lista seleccione a caixa tem várias opções, mas quando eu cliquei em documentos Antigos, que todos os outros desapareceram.No Site de Grupos, todos os grupos já estão selecionados 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;
}
}
);
Visão:
<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>
Solução
Isso está acontecendo porque o ngOptions
no selecione as listas são limitadas para a mesma matriz como a ngModel
. ngModel
precisa ser uma outra matriz que armazena apenas os valores selecionados.
Com siteGroups
como exemplo, o que está acontecendo é que a lista selecione opções são inicializados com siteGroups
, e todos eles são selecionados, pois os itens que estão no ngModel
(também o siteGroups
matriz).Quando você clicar em um deles, agora, ele remove todos os outros itens de ngModel
exceto a que você clicou.Desde ngOptions
é delimitada a mesma lista, todos os não selecionados opções de desaparecer também.
Para corrigir isso, criar diferentes propriedades da matriz no seu âmbito de aplicação para os valores selecionados em cada lista.