Ionic SelectBox

I have created a directive for a SelectBox.

Somehow i don’t like the normal select, so i created a control for this problem :smiley:

here you can see it in action:

and here is the Source:


  • Cursor (for desktop support- it looks strange now)
  • Animation: currently only slide-in-right
  • add tests (need help setting stuff up on win - if someone have time)
  • styling
  • add clear value functionality

if you like it, feel free to give me feedback so i can improve it.


Very nice, forked it and updated it to use ion-modal-view instead of div.modal.

All the animations that are associated with a modal are usable here, I think there maybe a problem with slide-in-right to be honest.

As for the cursor, I added a class to the input and just set it’s cursor to inherit.

1 Like

im still a newbie to this platform, and I dont know very well how to implement some functionalities.
I would like to know how can I obtain the selected value from the selectbox, since I tried and I couldn’t.

With the best regards

Hey Thank you for using my selectbox.

what you are looking for are the Attributes: ng-Selected-Value and ng-Selected-Id
in ng-Selected-Id there will be the index of your data array.
and in ng-Selected-Value there will be the selected value.
you can define the variables in your controller.

i hope this help you out

This is nice control but i am unable to bind more than one select box can you help me ?

Thanks in advance :smile:

Hey @kapilkarda
the problem was if there are multiple SelectBoxes it will share its controller. so everytime the last SelectBox would be open.

my fix doesn’t work like i want. i may have to recode the this selectbox.

The select box remains open after selection is done. I want to auto close the select box after selection is made on ios. How can i achieve this?

Hey @vishnukhaunte:

can you make a codepen?
Normally the selectbox should close itself after selection.

Needed a way to fire a function on change. Just sent a pull request.

Thanks! It was a better fit for my project than the native select and looks good.

How to bind an object type for example see below code:

var counties = [

This does not have id or name.