I hv created a ion-select and i want to change it to popover.
The popover was created but it failed to pass ngModel value back to the parent component, I end up messing it up…
So here is the code… I hope someone could tell me what’s the best way to make it happen.
I tried reading the document but the example was just too complicated and i m not too familiar with what’s going on in Angular2 yet.
for example i have 3 Chapters and each I hv a json file storing informations.
The ion-select will choose a book chapter and then load the corresponding JSON file to the content.
I however do not know how to achieve the same using popover…
.ts file:
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CardService} from '../../providers/card-service/card-service';
import {LangService} from '../../providers/lang-service/lang-service';
@Component({
templateUrl: 'build/pages/home/home.html',
providers: [CardService, LangService],
directives: [LangService]
})
export class HomePage {
///
public cards:any;
public chpselected : any;
public menuArray: any;
public viewmode : any;
public alertOptions: any;
constructor(
private navController: NavController,
public cardService: CardService,
public langService: LangService
){
this.menuArray = [
{
id: 1,
cchap: '01',
ctitle: 'Chapter One'
},{
id: 2,
cchap: '02',
ctitle: 'Chapter Two'
},{
id: 3,
cchap: '03',
ctitle: 'Chapter Three'
},
];
this.alertOptions = {
title: '',
cssClass: 'chapterselector'
};
this.chpselected = this.menuArray[0];
this.loadCards();
};
/* LOAD CARDS load JSON*/
loadCards(){
this.cardService.load(this.chpselected.cchap)
.then(data => {
this.cards = data;
});
}
/* LOAD CARDS ENDED*/
///
}
Mark-Up:
<ion-header>
<ion-toolbar>
<ion-segment [(ngModel)]="viewmode">
<ion-segment-button value="read" style=" max-width: 70px;"> New </ion-segment-button>
<ion-segment-button value="gallery" style=" max-width: 70px;"> Hot </ion-segment-button>
</ion-segment>
<ion-buttons end>
<langselectholder></langselectholder>
</ion-buttons>
</ion-toolbar>
<div class="bar bar-subheader" [style.background-color]="chpselected.color" style="color: white">
<ion-select [(ngModel)]="chpselected.cchap" (ngModelChange)="loadCards('$event.target.value')" [alertOptions]="alertOptions">
<ion-option *ngFor="let chapter of menuArray" value="{{chapter.cchap}}" >
<span style="color:white;">{{chapter.ctitle}}</span>
</ion-option>
</ion-select>
<ion-buttons end>
<button (click)="pop($event)" >
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</div>
</ion-header>
<ion-content padding class="home" #popover>
<h2>Welcome to Ionic!</h2>
<span *ngFor="let card of cards">
{{card.id}} {{card.aowline}}
</span>
</ion-content>