AngularJS multiselect component based off ngOptions


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


AngularJS Multiselect Build Status

AngularJS multiselect component based off ngOptions.




npm i amo-angular-multiselect


bower install amo-angular-multiselect


Declare a dependency on the amo.multiselect module:

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

and add the amoMultiselect directive to your template:

    options=" as option.label for option in app.options">

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.


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


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