效果:
html
<ion-item>
<ion-label>年齡</ion-label>
<ion-select [(ngModel)]="option" okText="Okay" cancelText="Dismiss" (ionChange)="change()">
<ion-option value="a">由小到大</ion-option>
<ion-option value="b">由大到小</ion-option>
</ion-select>
</ion-item>
<ion-list>
<ion-grid>
<ion-row>
<ion-col>姓名</ion-col>
<ion-col>電話</ion-col>
<ion-col>年齡</ion-col>
</ion-row>
<ion-row *ngFor="let people of data">
<ion-col>{{people.name}}</ion-col>
<ion-col>{{people.phone}}</ion-col>
<ion-col>{{people.age}}</ion-col>
</ion-row>
</ion-grid>
</ion-list>
ts:
export class HomePage {
option:any;
data: any;
constructor(public navCtrl: NavController) {
this.data=[{name:'amy',phone:'0912345678',age:'24'},
{name:'bob',phone:'0912335578',age:'20'},
{name:'candy',phone:'0912355578',age:'29'}]
}
change() {
console.log(this.option)
if (this.option == 'a') {
// 由小到大排序
this.data = this.data.sort(function (a, b) {
return a.age > b.age ? 1 : -1;
})
}else{
// 由大到小排序
this.data = this.data.sort(function (a, b) {
return a.age < b.age ? 1 : -1;
})
}
}
}
主要是當select 改變執行chang() 這個函式
然後排序是基本js寫法
其他排版上可以更改css去達到你要的效果