namoscato/angular-multiselect

AngularJS multiselect component based off ngOptions

AngularJS Multiselect

AngularJS multiselect component based off ngOptions.

Dependencies

• AngularJS v1.x
• Bootstrap CSS v3.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

Development

npm i
npm start

Running Tests

npm test

angular-multiselect's Issues

Fix documentation CI via Dependabot

See GitHub Actions: Workflows triggered by Dependabot PRs will run with read-only permissions

Object property model does not work without label option

This should ideally use the value property as both the label and model:

answer.value for answer in $ctrl.question.answers

but you have to do:

answer.value as answer.value for answer in $ctrl.question.answers

Configure GitHub Pages CD

Selected suffix text not rendering in deferred load context

Labels not reset when model changes to null

Given a populated model, change the model to null from the outside and the label / count does not update (i.e. it still shows the previously selected count).

Fix grouping data model

Add support for spaces in option expressions

Add support for something like:

option.id as (option | formatFilter : 'name') for option in options

you're slacking

you haven't updated this repository in two months. back to work.

Label functionality isn't working as expected

If you use a <label> with a for attribute referencing this component's id nothing happens when the user presses the label. Ideally you should be able to press the label and trigger the open event.

In the image below I've underlined the current linkage of for to id. If you put the id on the <button> instead of on the component then the browser will make clicking the label also click the button. Tested only in Chrome so far.

is a quick look at the markup.