amo-angular-multiselect

AngularJS multiselect component based off ngOptions

Stats

StarsIssuesVersionUpdatedCreatedSize
amo-angular-multiselect
1261.3.6a year ago5 years agoMinified + gzip package size for amo-angular-multiselect in KB

Readme

AngularJS Multiselect Build Status

AngularJS multiselect component based off ngOptions.

Dependencies

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

Development

npm i
npm start

Running Tests

npm test

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.