Native Select Menus for ionic


#1

Is there any Select Menus UI component for ionic similar to jQuery Mobile?

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html

or Any directives to create select options for forms ?


#2

We don’t have anything built in for that, but you can use the default <select> for now: http://docs.angularjs.org/api/ng.directive:select


#3

Hi,

Using <select> in mobile is not a good practice. My approach was putting a button to that form element, opening a modal with that button, in that modal user can select from the list(also search on the top) and once selected close the modal and write the selected data into the form since ionic doesn’t have anything similar to UIPickerView.

Hope this helps


#4

Good point @arlbozoluk. You’ll see a radio button layout used on mobile instead of select which is rarely used.


#5

I somewhat agree with @arlbozoluk and I do like the alternative @arlbozoluk has suggested,
But i think users would feel lost, taken off the current view if the select options taking over the entire screen to show all the options.

What happens when IOS & Android come with new UI select menus and the custom solution now has to be maintained to work with new technologies?

as far as I am concerned, there was no time spent on revamping native controls .


#6

From what I can tell, iOS heavily uses separate interfaces for this, usually a radio button list, or they use a toggle button display. Unfortunately, there is not much we can do the revamp some of the native controls.

But we are always open to suggestions. My recommendation right now would be to avoid <select> for now.


#7

Very cool, i followed @arlbozoluk suggestion and created the form, looks good.


#8

Happy to hear @dhondi_srikanth :slight_smile:


#9

@max I can see where the native select menu can be a preferred solution especially when using an iPad which renders a popover instead of the select picker on bottom. Can you check out my recommendation and gist at https://gist.github.com/mrmusa/7992276 and let me know if this is a bad hack or a potential solution? I have tested in iPad simulator but not on any other platform. I’m pleased so far.


#10

LungoJS uses select to show dropdown in mobile UI. Why select element is not a good option for mobile UI ? It will be good if Ionic can look into how Lungo is doing it and provide some CSS improvement to Ionic select element for mobile UI. Currently select does not look good on Android browser. I am using Android 4.1


#11

Hi @arlbozoluk,

As you said that using in mobile is not a good practise and you suggest to put a button for opening a modal for selection.
In my case, i already load my login page using modal and in my login page, i want to make a selection. So, which one i need to use? using or put a button to load another modal for selection ?
Thks for your advanced advise.


#12

I use nativ select, can i make ajax call when user click on select then only after i fetch data for options show nativ select with options?


#13

What about using Angular UI Select?

I have implemented an UI Select, the problem is that when I tap on the UI Select component on my mobile phone, the component takes a long for response and I don’t know I why.

Anyone has worked with UI Select on an Ionic application?


#14

@lividmufo IMO I wouldn’t use ui-select for a mobile device as dropdown list aren’t very good for to UI and UX. I’d either stick with the standard <select> and on top of what @max advises try using ngOptions if using dynamic select menus. https://docs.angularjs.org/api/ng/directive/ngOptions

If you don’t want to use the standard <select> then, I’ve create a list within a $ionicModal there you can use either use radio or checkbox but still styled natively using <ion-checkbox> as they are dependant on platform.

iOS gives a round checkbox, android square checkbox - these defaults can also be over-ridden too. check out $ionicConfigProvider http://ionicframework.com/docs/api/provider/$ionicConfigProvider/#form.checkbox


#15

I’m migrating a project where I used ui-select extensively, from desktop-oriented angular to Ionic. I didn’t like the resulting select widget in the mobile, and by searching here I found https://github.com/guylabs/ion-autocomplete/ on a post by its creator @guylabs and really liked it.

Converting from ui-select was just a matter of getting my http autocomplete glue code and ditching 90% of it, because of the well thought-of configuration options offered by ion-autocomplete. Got it working in 20mins or so.


#16

Finally I used the standard <select> component, because the ui-select didn’t work appropriately.

On the future I will try ion-autocomplete.

Thanks, @webslinger and @nuba :wink:


#17

When user click on select, need: fetch data from server -> render options -> open dropdown( native android select ), so i need somehow intercept event, and make something like dropdown beforeshow event, can anybody help me ?


#18

@nuba Thanks for the praise :). I’m glad that the migration worked that well and that you use the ion-autocomplete. Soon I will release a new version with a lot of new features. So check out the GitHub project.

Thanks and regards,

Guy