AngularJS Multi-select Dropdown
Design guidelines require a multi-select dropdown that shows all the options as selectable and tallies the selections as a comma-separated, concatenated string in the dropdown’s consolidated view.
The TARGET
Basic Requirements
- Multi-select
- Summarizes selections in collapsed view
- Shows all items in dropdown and can toggle selection state
- Cross-browser compatible
- Skinnable
- AngularJS
The CONTENDERS
UI-Select
Previously UI-Select2 Documentation
Overview
This 100% AngularJS solution provides a customizable multi-select dropdown angular directive. Once an item has been selected, it is removed from the dropdown list and becomes a “remove this item” button with customizable label.
Try it
Review
Although there are many available skins for download, the CSS is usually intended for Select2 and therefore the classes and class declarations do not match that of ui-select. There is a bit of an aesthetic drawback when the number or size of the selected items forces the dropdown to occupy two lines. The other UI inhibitor is that the dropdown can only be triggered in the space between the selected items and the edge of the dropdown, therefore making it difficult to find a consistent place for enabling dropdowns.
AngularJS Dropdown Multiselect
Overview
This 100% AngularJS solution provides a customizable multi-select dropdown angular directive. Select options can be toggled and filtered (with search criteria) while dropdown is shown. Also provides options to select or clear all items. Extensive documentation and examples are provided on their site.
Try it
Review
This full-featured and highly customizable directive addresses all the functionality you could want. Easily change visual themes with Bootstrap skins (e.g. Bootswatch).
AngularJS Multi Select
Overview
This 100% AngularJS solution provides a customizable multi-select dropdown angular directive. Select options can be toggled and filtered (with search criteria) while dropdown is shown. Also provides options to select or clear all items. Icons can be shown next to items in the dropdown and in the button text.
It appears that there is a duplicate repo and it is unclear to me exactly what is going on. Both github users contributed to this repo, but only one contributed to this one.
Try it
Review
This full-featured and highly customizable directive addresses all the functionality you could want. There are no readily available skins for this.