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 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>

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.