Ionic Modal Select

Ionic Modal Select

Modal select for Ionic Framework based on $ionicModal

Free!

(4)
Mauro Bianchi

Mauro Bianchi

Member since 2014

Details

Version:
1.1.0
Size:
3mb
Ionic:
1.0.x,1.3.x
Platforms:
iOS, Android, Windows Phone
View ID:
23febfb8
Released:
7 years ago
Updated:
6 years ago
Category:
Plugins
Tags:
modal, select, options, form

ionic-modal-select

Modal select for Ionic Framework based on $ionicModal

Demo here

animated example

Features

  • supports long list of object via collection-repeat
  • supports unsetting the chosen value (optional)
  • optional search bar
  • customizable modal classes, modal header and footer classes
  • customizable buttons text

Usage

Get the files from github or install from bower:

bower install ionic-modal-select

Include ionic-modal-select.js or its minified version in your index.html:

<script src="lib/ionic-modal-select/ionic-modal-select.js"></script>

Add the module ionic-modal-select to your application dependencies:

angular.module('starter', ['ionic', 'ionic-modal-select'])

And you're ready to go.

Directives

This directive will transform the element into a modal select: when clicking the element a select dialog will be open, with options presented in a clickable list. Once the user clicks on an option, it will be set on the bound model.

For this to work the following conditions must apply:

  • The element you use this directive must be clickable.
  • The directive requires ngModel to be set on the element
  • The directive expects an inner element of class "option" to define the options template

The final value bound to your model will be determined as follow:

  • if you set the attribute option-getter will be set as getterFunction(selectedItem)
  • if you set the attribute option-property will be set as selectedItem[propertyName]
  • otherwise it will be set as the full object

Docs

You can find all options explained here

https://github.com/inmagik/ionic-modal-select

Demo and test app

You can see the picker in action in the Ionic view with this app id: 23febfb8.

There is also a demo available via web on codepen

Why should I buy? The project is on github!

This component is freely available on github and with a very permissive license (MIT).

However, if you find it useful and want support its development consider buying a copy on the Ionic Marketplace.

What you get

The zip file on the Ionic marketplace contains the lib (source and minified versions) as well as a sample app demonstrating various way to use it.

Examples

Simplest one.

This example shows a modal for choosing a number between 1 and 5.

In your controller:

$scope.selectables = [1,2,3,4,5];

In your template:

<button class="button button-positive" modal-select ng-model="someModel" options="selectables" modal-title="Select a number">
    Select it
    <div class="option">
        {{option}}
    </div>
</button>

To include a search bar in the previous example, just add has-search="true" (from version 1.1.0):

<button class="button button-positive" modal-select ng-model="someModel" options="selectables" modal-title="Select a number" has-search="true">
    Select it
    <div class="option">
        {{option}}
    </div>
</button>

Objects as options

In the following example we use some objects as options.

In your controller:

$scope.selectables = [
    { name: "Mauro", role : "navigator"},
    { name: "Silvia", role : "chef"},
    { name: "Merlino", role : "canaglia"}
];

We'll explore different possibilities we have with this options.

1. Setting the full object

If we do not set option-getter or option-property attributes, the model is assigned to the full option object when an option is selected.

<button class="button button-positive" modal-select ng-model="someModel" options="selectables" modal-title="Select a character">
    Select it
    <div class="option">
        {{option.name}} ({{option.role}})
    </div>
</button>
2. Setting and a property

If option-property attribute is set to a string, the bound model assigned that property of the option object when an option is selected. For example if we set option-getter="name", we get back the 'name' property of our options.

<button class="button button-positive" modal-select ng-model="someModel" options="selectables" modal-title="Select a character" option-property="name">
    Select it
    <div class="option">
        {{option.name}} ({{option.role}})
    </div>
</button>
3. Custom setter

If a function call is passed via option-getter attribute, the bound model assignment is done by calling this function with the selected option as the only argument (named 'option'). For example if we do this in our controller:

$scope.getOption = function(option){
    return option.name + ":" + option.role;
};
<button class="button button-positive" modal-select ng-model="someModel" options="selectables" modal-title="Select a character" option-getter="getOption(option)">
    Select it
    <div class="option">
        {{option.name}} ({{option.role}})
    </div>
</button>

We get back the phrase "Mauro:navigator", "Silvia:chef" or "Merlino:canaglia" if we click the previous defined options.

More examples to come.

See this codepen for now.

Hey there! You'll need to log in before you can leave a comment here.

Gaurav Chandra

Gaurav Chandra   ·   7 years ago

Can you provide this plugin as an ionic view app?

Mauro Bianchi

Mauro Bianchi   ·   7 years ago

Hi Gaurav, You can see the picker in action in the Ionic view with this app id: 23febfb8.

Eduardo Oliveira

Eduardo Oliveira   ·   6 years ago

Hello Mauro! I need to know if this plugin can receive data from a database, fill an array with ID and name, and then display to the user, so that it select an item? Do you have any examples of how to do this? Thank you!

Mauro Bianchi

Mauro Bianchi   ·   6 years ago

Hi Eduardo, yes, your use case is covered. Please refer to the github page for a link to some examples, I am going to release a more comprehensive site with docs and examples in the next days.

Mauro Bianchi

Mauro Bianchi   ·   6 years ago

Hi Eduardo, if still interested in examples, look at the new home page for the component: what you want to accomplish is described in the "options can change over time" section of this page http://inmagik.github.io/ionic-modal-select/#/app/examples

Eduardo Oliveira

Eduardo Oliveira   ·   6 years ago

Hello Mauro! I'll buy the component and try to work with two selects. I will try to load an array with data from a restfull api. The problem I see is catching ID (select value) selected by the user and select another call another Restfull api that will make the research data based on the selected first select ID. Thanks for the answer!

Eduardo Oliveira

Eduardo Oliveira   ·   6 years ago

Hello Mauro! As I wrote to you in the previous review, I bought the plugin, but I have a doubt. Where can I change the modal layout, customizing colors in addition to the button type and the language that is displayed on the labels and buttons? Thank you!

Pedro Brasileiro

Pedro Brasileiro   ·   6 years ago

Good job!!

Venkateshkumar Naidu

Venkateshkumar Naidu   ·   6 years ago

I have a question. If I use ng-required for a select field and traverse to-fro, I am getting validation error, even though the selected value appears. Any pointer on how to resolve this.

Eric Ong

Eric Ong   ·   6 years ago

hi Mauro, after i selected an option i want to trigger a function like example ng-click="someFunction()", how can i do that???

Oliver Kuchendorf

Oliver Kuchendorf   ·   6 years ago

Great plugin. Works perfect. Just one doubt. How can I unset any already selected option inside my controler? I do have a form with a couple of modal select options but I need to unset one option if another one is selected. I dont seem to find a solution and only see the RESET function which the user can click inside my modals but I would like to do this inside my controller. thx

Mauro Bianchi

Mauro Bianchi   ·   6 years ago

Hi Oliver, I have seen your email but for some reason I cannot reply to your address. Two quick ideas: - use the on-select callback to do what you want in your controller (se docs or github) - bind a $watch function on the value the model-select is bound to and do the same stuff there see if this helps... ps: i advise to use the github version of the plugin, the One in the market is a bit outdated best regards Mauro

Oliver Kuchendorf

Oliver Kuchendorf   ·   6 years ago

thanks Mauro, I appreciate your tips. I solved it already with the on-select callback and I simple disable my form send button until the user reselected all I need. Great plugin, thanx

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nsid N

Nsid N   ·   6 years ago

Hi, Thanks for this, I need to search in around 30K entries. any suggestion to make it fast ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

coolm4n

coolm4n   ·   6 years ago

Hi Mauro, When i turn on the search function (has-search="true"), somehow the first option is overlapped by the the search textbox. It works fine when the search function is off. Any way that i can customize the CSS file? Can i use text input instead of button? If yes, do you have any example? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

coolm4n

coolm4n   ·   6 years ago

Hi Mauro, When i turn on the search function (has-search="true"), somehow the first option is overlapped by the the search textbox. It works fine when the search function is off. Any way that i can customize the CSS file? Can i use text input instead of button? If yes, do you have any example? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nsid N

Nsid N   ·   6 years ago

Hi, Thanks for this, I need to search in around 30K entries. any suggestion to make it fast ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Oliver Kuchendorf

Oliver Kuchendorf   ·   6 years ago

Great plugin. Works perfect. Just one doubt. How can I unset any already selected option inside my controler? I do have a form with a couple of modal select options but I need to unset one option if another one is selected. I dont seem to find a solution and only see the RESET function which the user can click inside my modals but I would like to do this inside my controller. thx

Mauro Bianchi

Mauro Bianchi   ·   6 years ago

Hi Oliver, I have seen your email but for some reason I cannot reply to your address. Two quick ideas: - use the on-select callback to do what you want in your controller (se docs or github) - bind a $watch function on the value the model-select is bound to and do the same stuff there see if this helps... ps: i advise to use the github version of the plugin, the One in the market is a bit outdated best regards Mauro

Oliver Kuchendorf

Oliver Kuchendorf   ·   6 years ago

thanks Mauro, I appreciate your tips. I solved it already with the on-select callback and I simple disable my form send button until the user reselected all I need. Great plugin, thanx

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Eric Ong

Eric Ong   ·   6 years ago

hi Mauro, after i selected an option i want to trigger a function like example ng-click="someFunction()", how can i do that???

Venkateshkumar Naidu

Venkateshkumar Naidu   ·   6 years ago

I have a question. If I use ng-required for a select field and traverse to-fro, I am getting validation error, even though the selected value appears. Any pointer on how to resolve this.

Pedro Brasileiro

Pedro Brasileiro   ·   6 years ago

Good job!!

Mauro Bianchi

Mauro Bianchi   ·   7 years ago

Hi Gaurav, You can see the picker in action in the Ionic view with this app id: 23febfb8.

Eduardo Oliveira

Eduardo Oliveira   ·   6 years ago

Hello Mauro! I'll buy the component and try to work with two selects. I will try to load an array with data from a restfull api. The problem I see is catching ID (select value) selected by the user and select another call another Restfull api that will make the research data based on the selected first select ID. Thanks for the answer!

Mauro Bianchi

Mauro Bianchi   ·   6 years ago

Hi Eduardo, if still interested in examples, look at the new home page for the component: what you want to accomplish is described in the "options can change over time" section of this page http://inmagik.github.io/ionic-modal-select/#/app/examples

Mauro Bianchi

Mauro Bianchi   ·   6 years ago

Hi Eduardo, yes, your use case is covered. Please refer to the github page for a link to some examples, I am going to release a more comprehensive site with docs and examples in the next days.

Eduardo Oliveira

Eduardo Oliveira   ·   6 years ago

Hello Mauro! I need to know if this plugin can receive data from a database, fill an array with ID and name, and then display to the user, so that it select an item? Do you have any examples of how to do this? Thank you!

Gaurav Chandra

Gaurav Chandra   ·   7 years ago

Can you provide this plugin as an ionic view app?

Eduardo Oliveira

Eduardo Oliveira   ·   6 years ago

Hello Mauro! As I wrote to you in the previous review, I bought the plugin, but I have a doubt. Where can I change the modal layout, customizing colors in addition to the button type and the language that is displayed on the labels and buttons? Thank you!

Hey there! You'll need to log in before you can leave a rating here.

Pedro Brasileiro   ·     ·   6 years ago

Good Job

yousuf   ·     ·   6 years ago

Great

AppDrive   ·     ·   6 years ago

Awesome :)

Veysel   ·     ·   5 years ago

Great

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Veysel    ·     ·   5 years ago

Great

AppDrive    ·     ·   6 years ago

Awesome :)

yousuf    ·     ·   6 years ago

Great

Pedro Brasileiro    ·     ·   6 years ago

Good Job