Listing of names for check boxes menu from list and dynamic addition of checkbox select menus

Ionic Framework ionic-v3
1

hi,

I’m trying to figure out with two things at the same time in ionic2 application for one desired result.

I want to add names for check boxes menu from list public names: any = []; to get same menu, if I just list names into the page.html:

<ion-item class="ion-selector">
    <ion-label>Set 1</ion-label>
    <ion-select [(ngModel)]="SelectedValues1" multiple="true">
      <ion-option>Name1</ion-option>
      <ion-option>Name2</ion-option>
      <ion-option>Name3</ion-option>
    </ion-select>
  </ion-item>

If I have a list in my page.ts:

 this.names = [
      'Name1',
      'Name2',
      'Name3',
  ];

This way *ngFor="let name of names" seems incorrect, because I have list of check boxes instead of menu with check boxes:

<ion-item class="ion-selector" *ngFor="let name of names">
        <ion-label>Set 1</ion-label>
        <ion-select [(ngModel)]="SelectedValues1"  multiple="true">       
          <ion-option> {{name}} </ion-option>          
        </ion-select>
      </ion-item>

Reason why I’m want to do that, I’m trying to figure out, what is a correct way dynamically add new menu of check boxes on empty form, in the amount that the user would like, with button “add” for example, to avoid two listings in form like this:

Set 1 [(ngModel)]="SelectedValues1":

 <ion-item class="ion-selector">
    <ion-label>Set 1</ion-label>
    <ion-select [(ngModel)]="SelectedValues1" multiple="true">
      <ion-option>Name1</ion-option>
      <ion-option>Name2</ion-option>
      <ion-option>Name3</ion-option>
    </ion-select>
  </ion-item>

same as if I add Set 2 with [(ngModel)]="SelectedValues2":

 <ion-item class="ion-selector">
    <ion-label>Set 2</ion-label>
    <ion-select [(ngModel)]="SelectedValues2" multiple="true">
      <ion-option>Name1</ion-option>
      <ion-option>Name2</ion-option>
      <ion-option>Name3</ion-option>
    </ion-select>
  </ion-item>

And then also must be passed to function:

<button ion-button (click)="Go(SelectedValues1, SelectedValues2);">Ok</button>

Advice would be helpful

2

Hi, you could try to work with an input hidden in your view template, that creates an automatic record id, I used that somtimes in my app.

Something like that, in my app:

      <input type="hidden" [(ngModel)]="itemid" />
      <button ion-button block (click)="addItem(itemFamily)">{{ "ADD_THIS_ITEM" | translate }}</button>

And then, get this itemid value in the controller view, to launch or control code based upon this hidden id.

1 Like