Skinnable select control for Ionic framework
npm install ionic-select-controlionic-Select-Control
====================
bower install ionic-select-control --save
npm install ionic-select-control --save
javascript
angular.module('myApp', ['ionic', '$selectBox'])
`
3. Include necessary files in your index.html header, for example linking directly to files where bower component was installed:
`HTML
`
4. Use the select-box directive:
`HTML
ng-Item-Id="id"
ng-title="Select something!"
ng-data="mySelectedValue"
ng-placeholder="nothing selected!"
ng-select-changed="doSomethingWithSelectedValue(selectedValue)"
ng-placeholder-class="myPlaceholderStyle"
ngHtmlName="optionalHiddenFieldName"
ngIsRequired="true"
ngPopup=true
ngPopupClass="myIonicPopupClass"
>
`
$3
| Name | Description |Remark |
| :------------- | :------------- | :------------- |
|ng-Selected-Value|Scope variable that will get populated with selected option value|Required.
Updated using two-way binding. It is the internal ng-model of the component's hidden field.|
|ng-data|Scope object passed to SelectBox, format: list of object with two properties, one for label, one for value|Required.|
|ng-Item-Name|Name of property for label, in scope object passed to SelectBox|Required.|
|ng-Item-Id|Name of property for value, in scope object passed to SelectBox|Required.|
|ng-placeholder|Placeholder string when no value is selected|Required.|
|ng-title|Title of SelectBox|Required.|
|ng-select-changed|JS function to execute after item selection.|Optional.
This function argument name should be 'selectedValue', both in your controller function declaration and in SelectBox ng-select-changed attribute value (function call).|
|ng-placeholder-class|CSS class to apply to placeholder|Optional.|
|ng-select-box-class|CSS class to apply to whole select box control|Optional.|
|ngHtmlName|String.
Allows you to bind an name attribute on the hidden input (useful for form validation)|Optional.|
|ngIsRequired|Boolean, truthy.
Allows you to make the hidden input required (useful for form validation)|Optional.|
|ngPopup|Boolean, truthy.
Allows using ionicPopup service instead of ionicModal (it is more elegant for some cases)|Optional.|
|ngPopupClass|String.
Allows you to bind CSS classes to the ionicPopup configuration|Optional.|
Example of object for ng-data:
`javascript
var obj = [
{label: "Value1", id:"1"},
{label: "Value2", id:"2"},
{label: "Value3", id:"3"},
{label: "Value4", id:"4"}
]
``