AngularJS Multiselect

AngularJS multiselect component based off ngOptions.

Dependencies

AngularJS v1.5.x
Bootstrap CSS v3.3.x for dropdown styles
UI Bootstrap v1.3.x for dropdown functionality

Installation

npm

npm install amo-angular-multiselect

Bower

bower install amo-angular-multiselect

Usage

Declare a dependency on the amo.multiselect module:

angular.module('myModule', ['amo.multiselect']);

and add the amoMultiselect directive to your template:

<amo-multiselect
    ng-model="app.model"
    options="option.id as option.label for option in app.options">
</amo-multiselect>

where the value of options is of the following form:

[select as] label [group by group] for value in array

Keyword	Description
`array`	An expression which evaluates to an array.
`value`	Local variable which will refer to each item in the `array` during iteration.
`label`	The result of this expression will be the label for each option.
`select`	The result of this expression will be bound to the model of the parent `<amo-multiselect>` element. If not specified, `select` expression will default to `value`.
`group`	The result of this expression will be used to group options.

Settings

The following settings can be set on a per-instance basis via dasherized <amo-multiselect> attributes. Some settings can be set globally via camel cased amoMultiselectConfig constant properties.

Name	Type	Global	Default	Description
`deselectAllText`	`@string`	Yes	Deselect All	Deselect all option label text
`filterText`	`@string`	Yes	Search...	Search filter input placeholder text
`isDeselectAllEnabled`	`<boolean`	Yes	`true`	State of deselect all functionality
`isDisabled`	`<boolean`	Yes	`false`	State of dropdown toggle functionality
`isFilterEnabled`	`<boolean`	Yes	`true`	State of search filter input visibility
`isSelectAllEnabled`	`<boolean`	Yes	`true`	State of select all functionality
`label`	`&string`	No	—	Expression bound to the current button label text
`limitTo`	`<number`	Yes	500	Upper bound limit of options to show per group so that browser performance will not suffer with large data sets. Specify `0` or `false` to disable limiting.
`onChange`	`&function(label)`	No	—	Expression called with `label` string when model changes
`onToggleDropdown`	`&function(isOpen)`	No	—	Expression called with `isOpen` boolean when dropdown opens or closes
`selectAllText`	`@string`	Yes	Select All	Select all option label text
`selectedSuffixSingularText`	`@string`	Yes	item	Singular suffix appended to button label text when option label properties are undefined
`selectedSuffixText`	`@string`	Yes	items	Suffix appended to button label text when option label properties are undefined
`selectText`	`@string`	Yes	Select...	Default button label text when no options are selected

Development

Install dependencies
```
 npm install
```
Compile JavaScript & CSS
```
 gulp all
```
Run local webserver
```
 gulp serve
```

Running Tests

Install the Karma commandline interface globally and run:

karma start

cszy/angular-multiselect