Ionic SelectBox

demo
1

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:
http://codepen.io/Auro/pen/wKpdn

and here is the Source:

todo

  • 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.

3 Likes
2

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
3

hi,
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

4

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

5

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

Thanks in advance :smile:

6

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.

7

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?

8

Hey @vishnukhaunte:

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

9

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.

10

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

var counties = [
{“1”:“County1”},
{“2”:“County2”},
{“3”:“County3”},
{“4”:“County4”}
]

This does not have id or name.