1

Hola a todos estoy trabajando con Angular, y Bootstrap 4.

1.- Tengo el siguiente modal y quisiera que al agregar la información dinámicamente, agregue algunos checkbox ya seleccionados y otros no, eso dependiendo de la configuración, por ahora lo estoy llenando con un array de objetos, pero quisiera saber qué tendría que hacer para llenarlo con algunos check seleccionados y otros no.

introducir la descripción de la imagen aquí

2.- En el Modal puedo seleccionar o deseleccionar los checkbox y cuando le de a Save changes obtenga el id de los checkbox que fueron modificados, tanto los seleccionados como los deseleccionados.

Mis ckecbox ya tienen un value para identificarlos, solo que no sé cómo sacar todos los check modificados

introducir la descripción de la imagen aquí

Les comparto el proyecto para que me apoyen a orientarme a cómo podría solucionar estos inconvenientes que tengo

https://codesandbox.io/checkbox

De antemano muchas gracias por su apoyo.

1 respuesta 1

1

Puedes resolverlo de esta manera:

Primero modificas el select de esta manera:


<input 
     (change)="revisarCambio(obtenerClave(servicio, subServicio))" 
     type="checkbox" 
/>

En tu component.ts agregas esto

/**
   * Obtiene el nombre para el objeto seleccionados
   * @param servicio
   * @param subservicio
   */
  obtenerClave(servicio, subservicio): string {
    return servicio.nombreServicio +'$'+ subservicio.idServicio;
  }
  //Aqui guardamos las referencias 
  seleccionados = {};
  //Asigamos le cambio al objeto `seleccionados`
  revisarCambio(clave) {
    //Esto es para que no de error si no existe la propiedad
    if (!this.seleccionados[clave]) this.seleccionados[clave] = false;
    //Esto invierte la seleccion actual. 
    this.seleccionados[clave] = !this.seleccionados[clave];
  }

Te dejo un ejemplo funcional aqui

1
  • Excelente amigo, muchas gracias por el apoyo. funciona bien. Commented el 29 may. 2020 a las 22:49

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.