Dynamically create given amount of checkbox lists

Ionic Framework ionic-v3
1

Hello,

I’m trying to figure out, what is a proper technique in ionic2, dynamically create several check-boxes lists with edit ability.

For example, on page1, if I set amount of needed check-box lists 3, with press on button “continue”, I want load second page2, which must contain 3 buttons, each with own popup checkbox lists, or better without popup menu, just checkbox lists separated by titles and each able to get own set of checked values for further recording into database.

At this moment I have implementation, which has one popup menu with checkbox list, after saving of one set of items, it allows user create new set for second addition to write it into database. This solution works fine, and amount of lists is unlimited, because it is just one set, with recording and clearing after saving. but problem is that I can’t see content of previous created lists and can’t edit it after saving, it can be edited after recording into database, but goal is to allow user edit asking amount of checkbox lists, before saving, and allow user to see all lists at the time of editing.

Image shows desired implementation:

2

Hello,

I think you can do that with holding all values in array. You need to make it persistent between switching from 2a to 3a to 2a to 3a…

Maybe it is easier if you integrate 3a in 2a, then you need not make it persistent between page switching.

For example 3a is a modal and you hand over needed values as params.

For example 2a room content is an accordion witch open on click.

In both cases it makes sence that 3a is a custom component, then it is easy from 1 to make the right amount of whatever.

Best regards, anna-liebt

3

Hello, anna-liebt

Thank you for your feedback

I’m understand your answer, but as I’m new with Ionic and TypeScript, I’m not really sure, how properly create several check-box lists component by given amount for next or even same page dynamically

Any advice on this direction would be helpfull

4

Hello,
in angluar you use sructural directives to build dynamic contents. One is for example *ngFor. This takes an iterable whatever, mostly an array, an interates over that. If the array hold objects, then you can use this objects and her propertys to set dynamically whatever. My english not best so look here. https://codecraft.tv/courses/angular/built-in-directives/ngfor/

If you use for example an accordion like here https://www.primefaces.org/primeng/#/accordion then you can make it dynamic with ngfor like.

<p-accordion>
  <p-accordionTab *ngFor='let myitem of myarray' header={{myitem.mytext}}>
    <whatever ></whatever>
    
  </p-accordionTab>

</p-accordion>

If myarray holds 5 myitems, then you got 5 accordion-tabs with a header that got the string from myitem.mytext. Each accordion tabs holds its own whatever.

If whatever should also be dynamically then you can make it dynamically that myitem itself is an array that holds objects representing what you need.

The same kind of creating dynamic content you can do with a custom component, for example a button that opens a modal or <whatever>
Best regards, anna-liebt

5

Thanks, anna_liebt

Very useful information

but not sure how to create it for such list:

<ion-list>

  <ion-item>
    <ion-label>Item1</ion-label>
    <ion-checkbox [(ngModel)]="item1"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Item2</ion-label>
    <ion-checkbox [(ngModel)]="item2"></ion-checkbox>
  </ion-item>

</ion-list>

what array should be, instead value of input for checkbox:


 this.anArray.push({
      label: 'Item1',
      value: '',
    },
      {
        label: 'Item2',
        value: '',
      });
6

Hello,

did you mean something like that in homepage? https://stackblitz.com/edit/ionic-i1fb5u

Best regards, anna-liebt

1 Like
7

Well this makes things more clear, you add needed amount of check-boxes with incremented name. But difference is I want create same names list several times, for example 3 times, and amount of rooms can be different each time:

 this.activitiesList = [
      { name: 'Keyboard', checked: false },
      { name: 'Drums', checked: false },
      { name: 'Guitar', checked: false },
      { name: 'Bass', checked: false },
    ];

with result:

Room 1:

Keyboard
Drums
Guitar
Bass

Room 2:

Keyboard
Drums
Guitar
Bass

Room 3:

Keyboard
Drums
Guitar
Bass

and get checked values to console from each separately

8

Hello,

the principe of looping over an array stays the same. If an item of your array holds an array, you can loop over that again.

<bla *ngFor="let myitem of items; ">
//maybe some stuff here 
<blub *ngFor="let subitem of myitem.subarray;">
//maybe some stuff here
</blub>
//maybe some stuff here
</bla>

So on your button cliuck you generate your array content as you need it.

Best regards, anna-liebt