New "Select" style component

Hey !

First of all, thank you guys for your amazing work on this Framework. We, at Saabre, have been what they call early adopters of your technology. We are currently creating an app that compile most of the components Ionic Framework provide (header bars, nav bars, side views, slide boxes, tabs, popups…)

I must say the framework really lacks a “Select” style component for forms. This component would at first display like a label on a classic form. When pressed, it would open some sort of modal with items in it. The component would be single or multi select with ionic-toggle and would also be binded to data. It would also implement animations.

This would really be an awesome feature and I am sure that I am not the only one here that needs this.

Hakan.

3 Likes

To add some ideas, it may be a directive like the following

<ion-select
  ng-model="my_array_used_to_iterate_through_items"
  selected-text="'Selected text for label'"
  multiple-select=true
  animate="slide-in-up"
 />

Maybe we could add more options ? I would be happy to help (if needed) to code something like this :slight_smile:

I like the idea of ionic backed select element. I came across some css on code pen and thought It was pretty clean looking, although I’m sure it could be cleaned up.

5 Likes

For the record we’re not opposed to the select element and would like to add it. However, it usually gets the back seat to other issues and features as the framework has been growing.

The select styles that @mhartington built are great and we’ll probably start from there with @Ben’s input, but I imagine there are many cross browser/platform issues with this one so we’ll have to heavily test it.

I’m looking forward to getting it into master in and getting the community’s feedback, thanks!

I was more thinking of something like that :


5 Likes

Just to add some notes here, we created this simple directive based on older (alpha) versions of ionic modal service, using ion lists and ion-toggle too. But it doesn’t work well any more with the new beta of ionic. Also, the array binded to the component contains objects with 3 property (text, icon, checked).

@hakan_ebabil I really like that! Would be great if you could refractor it and get it working

@mhartington sure thing :slight_smile: The only issue is that the small piece of code has been coded for alpha release. We will need to update it for beta version of Ionic Framework. Also, this was one of the first angular directive we coded, so it’s kinda messy. We will send the suff back to you once done.

So, three parts. First the directive, and then two templates (one for the “label”, and the other for the “list”). I also added an example

// Fancy select directive
.directive('fancySelect', function($ionicModal) {
    return {
        /* Only use as <fancy-select> tag */
        restrict : 'E',

        /* Our template */
        templateUrl: 'templates/directives/fancy-select.html',

        /* Attributes to set */
        scope: {
            'items'        : '=', /* Items list is mandatory */
            'value'        : '='  /* Selected value binding is mandatory */
        },

        link: function (scope, element, attrs, $filter) {

            /* Default values */
            scope.multiSelect   = attrs.multiSelect === 'true' ? true : false;
            scope.allowEmpty    = attrs.allowEmpty === 'false' ? false : true;
            
            /* Header used in ion-header-bar */
            scope.headerText    = attrs.headerText || '';
            
            /* Text displayed on label */
            scope.text          = attrs.text || '';
            scope.defaultText   = attrs.text || '';
            
            /* Notes in the right side of the label */
            scope.noteText      = attrs.noteText || '';
            scope.noteImg       = attrs.noteImg || '';
            scope.noteImgClass  = attrs.noteImgClass || '';

            /* Instanciate ionic modal view and set params */
            
            /* Some additionnal notes here : 
             * 
             * In previous version of the directive,
             * we were using attrs.parentSelector
             * to open the modal box within a selector. 
             * 
             * This is handy in particular when opening
             * the "fancy select" from the right pane of
             * a side view. 
             * 
             * But the problem is that I had to edit ionic.bundle.js
             * and the modal component each time ionic team
             * make an update of the FW.
             * 
             * Also, seems that animations do not work 
             * anymore.
             * 
             */
            $ionicModal.fromTemplateUrl(
                'templates/directives/fancy-select-items.html',
                  { 'scope': scope,
                    'animation': 'slide-left-right-ios7' }
            ).then(function(modal) {
                scope.modal = modal;
            });

            /* Validate selection from header bar */
            scope.validate = function (event) {
                // Construct selected values and selected text
                if (scope.multiSelect == true) {

                    // Clear values
                    scope.value = '';
                    scope.text = '';

                    // Loop on items
                    jQuery.each(scope.items, function (index, item) {
                        if (item.checked) {
                            scope.value = scope.value + item.id+';';
                            scope.text = scope.text + item.text+', ';
                        }
                    });

                    // Remove trailing comma
                    scope.value = scope.value.substr(0,scope.value.length - 1);
                    scope.text = scope.text.substr(0,scope.text.length - 2);
                }

                // Select first value if not nullable
                if (typeof scope.value == 'undefined' || scope.value == '' || scope.value == null ) {
                    if (scope.allowEmpty == false) {
                        scope.value = scope.items[0].id;
                        scope.text = scope.items[0].text;

                        // Check for multi select
                        scope.items[0].checked = true;
                    } else {
                        scope.text = scope.defaultText;
                    }
                }

                // Hide modal
                scope.hideItems();
            }
            
            /* Show list */
            scope.showItems = function (event) {
                event.preventDefault();
                scope.modal.show();
            }

            /* Hide list */
            scope.hideItems = function () {
                scope.modal.hide();
            }

            /* Destroy modal */
            scope.$on('$destroy', function() {
              scope.modal.remove();
            });

            /* Validate single with data */
            scope.validateSingle = function (item) {

                // Set selected text
                scope.text = item.text;

                // Set selected value
                scope.value = item.id;

                // Hide items
                scope.hideItems();
            }
        }
    };
});

Now the code for the “label” part within the form

<ion-list>
  <ion-item ng-click="showItems($event)">
    {{text}}
    <span class="item-note">
      {{noteText}}
      <img class="{{noteImgClass}}" ng-if="noteImg != ''" src="{{noteImg}}" />
    </span>
  </ion-item>
</ion-list>

and now for the item list :

<ion-view class="fancy-select slide-left-right-ios7 modal">
    <ion-header-bar class="bar-positive">
        <button ng-click="validate()" class="button button-positive button-icon ion-ios7-arrow-back"></button>
        <h1 class="title">{{headerText}}</h1>
    </ion-header-bar>
    <ion-content>
        <div class="list">
            <!-- Multi select -->
            <ion-toggle 
                ng-repeat="item in items"
                ng-if="multiSelect" 
                ng-checked="item.checked"
                ng-model="item.checked"
                class="item">
                <img class="fancy-select-icon" ng-if="item.icon != null" src="{{item.icon}}" alt="{{item.text}}" />
                {{item.text}}
            </ion-toggle>
            
            <!-- Single select -->
            <label 
                ng-repeat="item in items"
                ng-if="!multiSelect"
                class="item"
                ng-click='validateSingle(item)'>
                <img class="fancy-select-icon" ng-if="item.icon != null" src="{{item.icon}}" alt="{{item.text}}" />
                {{item.text}}
            </label>
        </div>
    </ion-content>
</ion-view>

An example of usage :

            <fancy-select
                allow-empty='false'
                value="user.country.id"
                text="'Country'"
                header-text="'Choose country'"
                items="countries">
            </fancy-select>

Sorry I do not have a precise documentation but I think this can be a good start to integrate something within ionic framework. In my opinion, there are only 3 things to take care of :

  1. Directive should be “generic”, but it seems that there are so many configuration possibilities (let’s say for exemple, user should be able to specify class for the header bar of the “list view”).

  2. Item list should be opened in the left or right pane. I had to edit ionic modal js to make this possible. By passing the parent selector in which the list should be opened

  3. Animations do not work. And it seems that the code pen here : http://codepen.io/ionic/pen/gblny is outdated (?). Code here seems different to examples in modal documentation.

A coworker also added some “Note” to the label. Made a screenshot to illustrate the concept :smiley:

    scope.noteText      = attrs.noteText || '';
    scope.noteImg       = attrs.noteImg || '';
    scope.noteImgClass  = attrs.noteImgClass || '';

1 Like

This is an interesting ui paradigm… Honestly one of the main reasons we haven’t added it is because select boxes are a very “desktop” oriented component. They just don’t make as much sense within a mobile context. I’ve seen them work best as a list item that slides over to a list of options and then back again.

That all said, we’ll be taking your feedback and discussing how best we can accommodate those who still wish to have some sort of styled select component. Thanks!

Hey, i’m the front-end developer working with @hakan_ebabil at Saabre. Thanks also for you awesome framework, i’m really fan :slight_smile:

About this discussion : If you take a look at iOS settings for exemple, you always have a select style component. Maybe call it something other than select, but it’s really a very important feature. We need it on all our forms.

Exemple with international panel in iOS7 :

Currently, to do it with ionic, we need to create one page for each list on choices. For a big form, it’s not the best way I think.

For the moment, we did if with this CSS :
.fancy-select {
position: fixed;
left: 0;
width: 100%;
height: 100%;
}
and by using a modal.

Hi @jonathanpath, thanks for the kind words. We love the support and help!

With regards to your example within iOS 7, I think I prefer that ux experience over the phone’s native “selector.” I’ll chat with @adam about it, but there might be an easier way for us to create a simplified version of what you’re hacking together currently…

1 Like

I recently added a select component which fits inside a list item:

Currently its only in the nightly build and is scheduled to go out with the beta.2 release soon.

I was also looking for a style solution for the html select and I had the idea of using a button that toggles a modal with a list instead.

What do you think?

I created a plunkr here. I’m not sure about how to simulate the ng-change of the select with the list. What do you recommend?

Thanks

1 Like

I really like this proposal (and example video). The current Ionic select is good if there are only a few options. But when you have many then I believe this UX is far better suited. Are there any plans to integrate this into Ionic?

Any news about that select ?
I like fancySelect is ther avalible working version ?
How can i use angular translate with fancy select ?

how to take the fancy-select value of each select and sent to a database with $ http.post

I recently learned ionic :sweat_smile:

For someone that actually use fancy-select I have a question for a simple problem.
When you use the default top value of modal, that is 20%, on the ion-view of fancy-select-items.html, all the list is shifted 20% to the bottom but with many items to show I’m not able to see the last one cause of top:20%.
If I set top to 0 all items are correctly shown.
Someone have know a way to display the list with a top of 20% but let all items visible?

My problem is noticeable when you have many items to show.
For example with the cose at : http://jsfiddle.net/q62jx3s6/5/ adding ten element to the list you can reproduce my problem.

All fancy-select I found have same issue.

Thanks.

Just tried using select as per the public documentation for 1.1 on my iOS device, and it looks like a windows combo box. How can I make it look something more native?