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>