ember-frost-select
the drop-down select widget to rule them all
Installation
ember install ember-frost-select
API
Attribute | Type | Value | Description |
---|---|---|---|
data |
array |
[{"label: "foo", "value": "bar"}] |
An array of "label"/"value" key/value pairs representing the rows in the select drop-down. |
disabled |
boolean |
true /false |
disable/enable the component |
error |
boolean |
true /false |
tell component to render an error styling |
on-change |
string |
<action-name> |
The action callback to call when the value of the select component changes |
on-input |
string |
<action-name> |
The action callback to call when the value of the filter changes as the user types |
selected |
number or array |
1 or [1, 2] |
The indices of the pre-selected values corresponding to values in the passed-in data. |
selectedValue |
any or array , if using multi-select |
'bar' or ['bar', 'buzz'] |
A value to choose in the drop down programmatically, or an array of values if using multi-select. Takes precedence over selected attribute. |
Examples
Assuming the following data is available in the consuming context:
data = [
{
"label": "foo",
"value": "bar"
},
{
"label": "fizz",
"value": "buzz"
}
]
singleSelected = 1
multipleSelected = [1, 2]
Simple single select
{{frost-select
data=data
selected=singleSelected
on-change=(action 'yourCallbackAction')
}}}
Multi select
{{frost-multi-select
data=data
on-change=(action 'yourCallbackAction')
selected=multipleSelected
}}}
Simple single select w/ external filtering
{{frost-select
data=data
on-change=(action 'yourCallbackAction')
on-input=(action 'yourInputFilterCallbackAction')
}}}
Selecting by value
Single value
To select values from the drop down programmatically, you can use the selectedValue
attribute
var selectedValue = "bar"
And in your HTMLbars template
{{frost-select
data=data
selectedValue=selectedValue
}}
will select
Multiple Values
If you are using multi-select, an array will be treated as multiple values to choose. In the example,
the selectedValue
attribute
var selectedValue = ["bar", "buzz"]
will select both values "bar"
and "buzz"
.
NOTE: Changing selectedValue
will overwrite any previous selections. However, changing selectedValue
to be undefined, or a value that can be evaluated to be equal to the previous value (using lodash's isEqual
function) will not cause values to be overwritten.
##Contributing This following outlines the details of collaborating on this Ember addon:
Installation
git clone
this repositorynpm install
bower install
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.