ionic3 ion-select的应用（用json动态填充）

1. ion-select

<ion-select [(ngModel)]="pets" multiple="true" [selectOptions]="petAlertOpts"  >

<ion-option *ngFor="let o of petData" [value]="o.value">{{o.text}}</ion-option>

</ion-select>

[selectOptions] 主要用来填充pop 的标题

  this.petAlertOpts = {          

       title: 'Like Pets?',          

       subTitle: 'Select your favorite'        

}; 

this.pets = ['cat', 'dog'];  //填充选中的item

this.petData = [          

{ text: 'Bird', value: 'bird' },          

{ text: 'Cat', value: 'cat' },          

{ text: 'Dog', value: 'dog' },          

{ text: 'Honey Badger', value: 'honeybadger' },        

]; 

//data sample

2.设计本地json， 动态填充 assets/data/sels.json

{ "sex":

[

{ "name": "男", "code": "male" },

{ "name": "女", "code": "female" }

]

}

3. 写通用function， in GlobalData.ts

data: any;

constructor( public http: Http, public storage: Storage ) { }

loadGlobalSelectOpts(): Observable {

if (this.data) {

    return Observable.of(this.data); }

else {

    return this.http.get('assets/data/select_opts.json') .map(

        result=>{ this.data = result; return this.data; });

}

}

4. 页面调用

ionViewDidLoad() {

this.globalData.loadGlobalSelectOpts()

         .subscribe(res => {

         this.actCats = res.json().activities;

         //this.ref.detectChanges();

}, error => { console.log(error); });

}

5. 页面成功展示