🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is AngularJS directive for the custom selectbox. It accepts flat list such as [1, 2, 3, 4, 5], but you can also provide array of object which has to be formatted as follows: [{id: 1, name: 'item 1'}, {id: 2, name: 'item 2'}, {id: 3, name: 'item 3'}] It’s possible to go through the list with up and down key arrows, and to select the item by hitting enter or space.

Forms Plugins

Documentation

angular-selectbox

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.

Demo

You can download it directly from here or using bower install angular-selectbox --save

Installation

  1. Add the angularSelectbox module to your dependencies
```javascript angular.module('myApp', ['angularSelectbox']); ``` 
  1. Use the selectbox directive for single select
```html <selectbox options="array" value="value"></selectbox> ``` 
  1. Use the selectbox-multi directive for multi select
```html <selectbox-multi options="array" values="value"></selectbox-multi> ``` 

Parameters

options

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'}]

value

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.

onChange

Type: 'Function'

Callback function when value is selected.

idKey

Type: String

Default: id

Name of the identifier key, by default it's id

labelKey

Type: String

Default: label

Name of the label key, by default it's label

title

Type: String

Default: Select

Used with selectbox-multi directive. Defines the title of the select box, next to the number of selected items.


You May Also Like