Gaurav Chandra
Can you provide this plugin as an ionic view app?
Modal select for Ionic Framework based on $ionicModal
Modal select for Ionic Framework based on $ionicModal
Demo here
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.
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 final value bound to your model will be determined as follow:
option-getter
will be set as getterFunction(selectedItem)
option-property
will be set as selectedItem[propertyName]
You can find all options explained here
https://github.com/inmagik/ionic-modal-select
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
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.
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.
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>
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.
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>
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>
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.
See this codepen for now.
Hey there! You'll need to log in before you can leave a comment here.
Can you provide this plugin as an ionic view app?
Hi Gaurav, You can see the picker in action in the Ionic view with this app id: 23febfb8.
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!
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.
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
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!
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!
Good job!!
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.
hi Mauro, after i selected an option i want to trigger a function like example ng-click="someFunction()", how can i do that???
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
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
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
Hi, Thanks for this, I need to search in around 30K entries. any suggestion to make it fast ?
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
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
Hi, Thanks for this, I need to search in around 30K entries. any suggestion to make it fast ?
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
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
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
hi Mauro, after i selected an option i want to trigger a function like example ng-click="someFunction()", how can i do that???
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.
Good job!!
Hi Gaurav, You can see the picker in action in the Ionic view with this app id: 23febfb8.
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!
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
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.
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!
Can you provide this plugin as an ionic view app?
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.
Good Job
Great
Awesome :)
Great
{{ rating.comment }}
{{ rating.comment }}
Great
Awesome :)
Great
Good Job