This is simple AngularJS custom selecbox which also supports multi select as well.
It's possible to go through the list with up and down key arrows, and to select the item by hitting enter for single select, or by hitting space for multi select.
You can download it directly from here or using bower install angular-selectbox --save
- Add the
angularSelectbox
module to your dependencies
```javascript
angular.module('myApp', ['angularSelectbox']);
```
- Use the
selectbox
directive for single select
```html
<selectbox options="array" value="value"></selectbox>
```
- Use the
selectbox-multi
directive for multi select
```html
<selectbox-multi options="array" values="value"></selectbox-multi>
```
Type: Object
An array you want to be listed in the selectbox.
You can use:
-
flat array:
[1, 2, 3, 4, 5]
-
collection:
[{id: 1, label: 'item 1'}, {id: 2, label: 'item 2'}, {id: 3, label: 'item 3'}]
Type: Integer
Value that is selected in selectbox.
If it's flat array then it must be the value from the list.
From the first example (flat list), if you want to select number 2
, than you define 2
to be value.
If it's collection the value is actually value of identifier (for example id
).
From the second example (collection) if you want to chose item 1
you pick it's identifier value, which is 1
.
Type: 'Function'
Callback function when value is selected.
Type: String
Default: id
Name of the identifier key, by default it's id
Type: String
Default: label
Name of the label key, by default it's label
Type: String
Default: Select
Used with selectbox-multi
directive. Defines the title of the select box, next to the number of selected items.