ngOptions seleccionado todas las opciones por defecto y la desaparición de las opciones a seleccionar
-
21-12-2019 - |
Pregunta
Tengo un extraño problema me parece que no puede solucionar los problemas con mi punto de vista.Estoy usando una directiva que genera un treeview de mi sitio web.Cuando seleccione un sitio, tengo dos cuadros de selección que llenar con los grupos en un solo sitio, y las listas en el sitio.Cuando las opciones de rellenar, todos ellos son seleccionados.He inspeccionado los elementos y todos ellos tienen option="selected"
Extraño es que, cuando hago clic en una opción única, de todos los demás desaparecen y sólo la opción seleccionada permanece.He comprobado la fuente en Chrome consola y sí sólo la selección de la opción de la etiqueta sigue siendo.
Por ejemplo las Listas de sitios de la casilla tiene varias opciones, pero cuando hice clic en documentos Antiguos que otros, todos desaparecieron.En el Sitio de los Grupos, todos los grupos que ya están seleccionados 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>
Solución
Esto está sucediendo porque el ngOptions
en las listas de selección se limita a la misma matriz como la ngModel
. ngModel
debe ser una de las diferentes matriz que contiene sólo los valores seleccionados.
Con siteGroups
como un ejemplo, lo que sucede es que la lista de selección opciones se inicializan con siteGroups
, y todos ellos son seleccionados debido a que los artículos están en el ngModel
(también el siteGroups
de la matriz).Cuando haga clic en uno de ellos, ahora elimina todos los demás elementos de ngModel
excepto el que se hace clic sobre.Desde ngOptions
está delimitado a la misma lista, todos los no seleccionados opciones a desaparecer también.
Para solucionar este problema, crear separado de la matriz de propiedades en su ámbito de aplicación para los valores seleccionados en cada lista.