Dynamic multi select


#1

Hey All,

I wanted to share a solution that I came up with to create multi select alerts dynamically. I wanted to open a multi select with a button, but also be able to repopulate the multi select with values already chosen. I was not able to find anything online so I came up with this. Please let me know if it is helpful or if anyone has any improvements.

TypeScript:

`import { Component } fr`om '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  itemsArray: Array<any> = [];
  selectedItems: Array<any> = [];

  constructor(public navCtrl: NavController,
    public alertCtrl: AlertController) {
  }

  /**
   * Load itemsArray with object that will make up the select list
   */
  chooseItems() {
    this.itemsArray = this.loadItemsArray();
    if (this.selectedItems.length !== 0) {
      /**
       * selectedItems is not empty; iterate thru items array sending
       * each item object to the setCheckedItems function to determine witch
       * items need to be checked 
       */
      for (let i = 0; i < this.itemsArray.length; i++) {
        this.setCheckedItems(this.itemsArray[i]);
      }
      this.createMultiSelectList();
    } else {
      // selectedItems is empty; create list with all items unchecked
      this.createMultiSelectList();
    }
  }

  /**
   * Create an show the select list with the objects from the items Array
   */
  createMultiSelectList() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Items');
    for (let i = 0; i < this.itemsArray.length; i++) {
      alert.addInput(this.itemsArray[i]);
    }
    alert.addButton('Cancel');
    alert.addButton({
      text: 'Ok',
      handler: data => {
        this.selectedItems = data;
        console.log(this.selectedItems);
      }
    });
    alert.present();
  }

  /**
   * Compares each item in the selctedItems array to each item
   * int the itemsArray; If they match set checked to true
   * 
   * @param item 
   */
  setCheckedItems(item) {
    for (let i = 0; i < this.selectedItems.length; i++) {
      if (this.selectedItems[i] === item.value) {
        item.checked = true;
      }
    }
  }

  /**
   * Create initial items array will all item object having checked set to false
   */
  loadItemsArray(): Array<string> {
    let items = [];
    for (let i = 0; i < 5; i++) {
      let item = i + 1;
      let x = item.toString();
      let itemObject = {
        type: 'checkbox',
        label: 'Item ' + x,
        value: 'Item ' + x,
        checked: false
      };
      items.push(itemObject);
    }
    return items;
  }

}

Html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <button ion-button block (click)="chooseItems()">Choose Items</button>
</ion-content>