iT邦幫忙

0

目前想要按照價格做排序,如圖
http://ithelp.ithome.com.tw/upload/images/20170808/20106196Ifw75OUBMJ.jpg
上圖的html
http://ithelp.ithome.com.tw/upload/images/20170808/20106196kZiwwNcvE9.jpg
但因為不太會Ionic的語法,所以有爬了文得到如圖
http://ithelp.ithome.com.tw/upload/images/20170808/201061963XI7mbEP5w.jpg
http://ithelp.ithome.com.tw/upload/images/20170808/20106196zHUGYcYgEl.jpg
範例的結果是這樣
http://ithelp.ithome.com.tw/upload/images/20170808/20106196KGiWvbZsTG.jpg

想問下各位客官我在ts或html檔要打什麼呢?因為我是用select的下拉式選單去做排序而非範例中的按鈕式排序,麻煩各位指教。

1 個回答

0
hui_0369
iT邦新手 5 級 ‧ 2017-08-11 16:57:23
最佳解答

效果:
http://ithelp.ithome.com.tw/upload/images/20170811/20103827wrlF95eTPY.png
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去達到你要的效果

感謝幫助,感覺只差一點了,目前跑出這個錯誤,有稍微爬一下文,但目前還是卡住,希望可以指點迷津一下,感恩
http://ithelp.ithome.com.tw/upload/images/20170812/20106196qVXLjqC0bo.jpg
下圖是從github爬到的 但不知道怎麼套用在select裡面。。。
http://ithelp.ithome.com.tw/upload/images/20170812/20106196JdO21KKn1x.jpg

不好意思是我沒看清楚,自己用的是items卻跟你一起用data難怪會錯XD 目前解決了,非常謝謝你~

hui_0369 iT邦新手 5 級 ‧ 2017-08-14 09:25:31 檢舉

/images/emoticon/emoticon42.gif

我要發表回答

立即登入回答