
Ionic Modal Select
Modal select for Ionic Framework based on $ionicModal
$0.00
Details
ionic-modal-select
Modal select for Ionic Framework based on $ionicModal
Demo here
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:
```
```
Add the module ionic-modal-select
to your application dependencies:
angular.module('starter', ['ionic', 'ionic-modal-select'])
And you're ready to go.
Directives
modal-select
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 asgetterFunction(selectedItem)
- if you set the attribute
option-property
will be set asselectedItem[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>
Including a search bar
To include a search bar in the previous example, just add has-search="true"
(from version 1.1.0):
html
<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.