Amo-angular-multiselect NPM

AngularJS Multiselect

AngularJS multiselect component based off ngOptions.

Dependencies

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

Installation

npm

npm i 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
`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`.
`label`	The result of this expression will be the label for each option.
`group`	The result of this expression will be used to group options.
`value`	Local variable which will refer to each item in the `array` during iteration.
`array`	An expression which evaluates to an array.

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
`conjunctionText`	`@string`	Yes	and	Coordinating conjunction text used to join option labels
`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`	No	`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.
`name`	`@string`	No	—	Unique instance name used as the value of the button's `id` attribute
`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