Button Custom Select for ionic 2

Ionic Framework ionic-v3
1

image

2

Is there a question here?

1 Like
3

How to create a select button /button dropdown

4

As explained in Ionic docs (Just made a dynamic select for Ionic 2 today), and taking from your screenshots.

You should have something like that in horsepage.html :

  <ion-item>
    <ion-label>Select horse & trainer</ion-label>
    <ion-select >
          <ion-option *ngFor="let horse of horses | async" value="{{horse.name}} {{horse.trainer}}">{{horse.name}} {{horse.trainer}}</ion-option>
    </ion-select>
  </ion-item>

And like that in horsepage.ts

this.horses = YOUR_DATA_SOURCE;

If you have no data source, you can write it directly in horsepage.html

      <ion-item>
        <ion-label>Horse & Trainer</ion-label>
        <ion-select>
          <ion-option>1 & 1</ion-option>
          <ion-option>2 & 2</ion-option>
          <ion-option>3 & 3</ion-option>
          <ion-option>4 & 4</ion-option>
        </ion-select>
      </ion-item>

Now as you have tons of select on the same page, it will require a rather complex navigation system. You should think about modals, and various popups to “lighten” it a bit and decrease the number of clicks to the desired information.

Hope that helps :slight_smile:

5

Not sorry, not like that

6

I need a dropdown button as an image id