0

Se podría hacer un diseño igual al de esta imagen:

introducir la descripción de la imagen aquí

haciendo uso de input select con checkbox anidados ? lo que estoy haciendo es usar un contenedor y una lista de chekbox dentro del, y tengo el diseño igual al de la imágen, pero teno problemas de funcionalidad, ya que estoy trabajando con Angular y creo un contenedor que sería la categoría (en este caso Despensa), y luego creo una lista de checkbox que serían las subcategorías (Granos, aceites, etc), pero el problema que tengo es que no logro hacer que al hacer click en despensa me aparezcan solo las sucategorias que pertenecen a despensa, ya que todos comparten la misma clase que hace que se oculten o se muestren al hacer click en la categoría, se que el error es ese, pero no se como resolverlo. acá esta parte del código como creo ese diseño en la plantilla:

            <div *ngFor="let item of categorias; let i = index" (click)="mostrarOcultarSubCategorias(i)">
                + {{item}}
                <ul id="listaSubcategorias" [ngClass]="{'mostrarLista2': bandera2, 'ocultarLista': !bandera2}">
                    <li *ngFor="let item of subcategorias[i]; let index= index" class="pl-4">
                        <!-- <label><input type="checkbox" id="sub{{index}}" value="first_checkbox">{{item}}</label><br> -->
                        <input type="checkbox" id="sub-{{index}}" />
                        <label for="sub-{{index}}" class="ml-1">{{item}}</label>
                    </li>
                </ul>
            </div>

y para que se viera igual al diseño de la imagen modifique el Css (aunque no creo importante mostrarlo) ya que es un problema mas de funcionalidad el que tengo.

Gracias de antemano al que me pueda ayudar.

[Editado]

el código que me falto:

  mostrarOcultarSubCategorias(){
    this.bandera2= !this.bandera2;
  }

codigo CSS:

.mostrarLista2{
    left: 0; right: 0;
    margin: auto;
    display: block;
}

.ocultarLista{
    display: none;
}

Y esto es lo que sucede al hacer click en cualquiera de las categorías:

introducir la descripción de la imagen aquí

se muestran todos las subcategorias de todas las categorias, lo que quisiera lograr es que al hacer click en Despensa, solo se muestren las subcategorias de Despensa, al hacer click en Gormet solo se muestren las de Gorumet, y así... Como comenté arriba entiendo que se muestran todas por que todas dependen de la misma clase, pero no se me ocurre como solucionarlo.

5
  • El codigo de la funcion mostrarOcultarSubCategorias? Commented el 26 dic. 2020 a las 17:09
  • acabo de agregar mas codigo y una imagen explicando mejor lo que sucede. Gracias!
    – JulianProg
    Commented el 26 dic. 2020 a las 17:19
  • Prueba de añadir un atributo displayed a cada elemento de categorias (inicializado en false). El click llama a la función toggleCategoria con el índice por parámetro y éste cambia el atributo displayed = !displayed. La ul la pones con una directiva *ngIf="item.displayed" y listo. Si no te queda claro añado una respuesta con ejemplos, pero no tiene mucha pérdida.
    – VRoxa
    Commented el 26 dic. 2020 a las 20:26
  • En ese caso, al hacer click, por ejemplo, en la categoria Despensa se desplegaría la informacion correspondiente a ella, y si luego hago click en otra categoria, por ejemplo, Gorumet, se ocultaría la lista de Despensa y se mostraría la de Gourmet ? pregunto porque acabo de solucionar con algo similar a lo que comentas, pero me esta pasando eso, no puedo mantener 2 subcategorías desplegadas.
    – JulianProg
    Commented el 26 dic. 2020 a las 20:30
  • Bueno, te desarrollo una pequeña respuesta para como ejemplo.
    – VRoxa
    Commented el 26 dic. 2020 a las 21:11

1 respuesta 1

0

Como te comentaba,

Puedes añadir una propiedad a cada elemento de categorias llamado displayed. Esta propiedad determinará si un grupo está o no desplegado.

Al recibir tu array de categorías,

this.categories = categories.map(c => ({ ...c, displayed: false }));

De este modo inicializamos todos los elementos con la propiedad displayed a false.

Para desplegar un grupo, añadimos la función toggleCategory que va a cambiar esa propiedad de false a true y viceversa.

toggleCategory = (index: number) => {
  const category = this.categories[index];
  const { displayed } = category;
  category.displayed = !displayed;
};

En el HTML, bindeamos esa función al evento click de cada div, pasándole el índice por parámetro:

<div *ngFor="let category of categorias; index as i" (click)="toggleCategory(i)">
  <!-- Body -->
</div>

Por último, para mostrar u ocultar el contenido, añadiremos la directiva *ngIf al ul pasándole esa misma propiedad, haciendo que sólo se renderice cuando displayed sea true.

<ul class="subcategory" *ngIf="category.displayed">
  <!-- Body -->
</ul>

Te dejo aquí un ejemplo completo. Faltará añadirle todos los estilos y la lógica que necesites.

Espero que sirva.

11
  • Esto era lo que quería! por que también tenía un error con mi implementación que en realidad no se xq pasaba, cuándo seleccionaba un ítem de una subcategoría se seleccionaba también ese mismo ítem en las otras listas de subcategorías, no c xq... solo una cosa que no entiendo como funciona, si eres tan amable de aclararmela... veo que bindeas con ngModel, pero stuve revisando sobre el input checkbox y no veo una propiedad selected o un atributo selected, y veo que se coloca automaticamente en true cuando esta seleccionada y en false cuándo no, pero no entiendo como funciona y eso es vital.
    – JulianProg
    Commented el 26 dic. 2020 a las 22:23
  • La propiedad selected la añadí por completar, no sé si eso lo vas a necesitar tú. En cualquier caso, el virtual DOM de Angular va a añadir uno listener al elemento input type="checkbox" y los va a bindear automáticamente con la propiedad selected alternando de true a false (y viceversa). La propiedad selected la añadí yo (mira en el .ts) en el modelo subcategory, por si no te diste cuenta. El native element del input tiene un atributo checked que es el que controla Angular de forma automática y no tenemos que hacerlo nosotros, como digo. Cualquier duda, me comentas.
    – VRoxa
    Commented el 26 dic. 2020 a las 22:28
  • sinceramente no entendí esa parte, si se que el input chekbox tiene un atributo que se llama checked (si es true significa que esta marcado y false si no está marcado o seleccionado) ahora... veo que si quito el ngModel del html y si selecciono ó marco una subcategoría, luego cierro la lista de subcategorías y la vuelvo a desplegar entonces ya no está seleccionada esa categoría que marqué y sinceramente no entiendo como está funcionando esa parte, trate de buscar información al respecto pero no encuentro algo que me ayude a entenderlo.
    – JulianProg
    Commented el 26 dic. 2020 a las 22:36
  • Lo que hago con la propiedad selected de la subcategoría es "almacenar" ese estado donde se quedó. Cuando se despliega el ul, cada no de los li y su input se renderiza de nuevo. Al cerrar (o colapsar) la categoría, el input se destruye, por lo que no hay forma de saber con qué estado se quedó. Es por eso que lo bindeo a esa property selected, para que cuando lo renderice de nuevo, lo ponga checked o no en función del modelo de datos que mantengo en el componente.
    – VRoxa
    Commented el 26 dic. 2020 a las 22:40
  • Bueno... muchas gracias por tu tiempo de verdad, solo me falta buscar mas información sobre eso xq no termino de entender muy bien lo del ngModel, soy nuevo en Angular... si veo que si lo coloco de esta forma: [checked]="subcategory.selected" funciona, pero el no se actualiza automáticamente el valor de la propiedad selected como con el ngModel.
    – JulianProg
    Commented el 26 dic. 2020 a las 23:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.