#AngularJS Dropdown Multiselect

This package was forked from https://github.com/dotansimha/angularjs-dropdown-multiselect, and has another set of additional options:

• enableNewItem: to show a field to add a new item to the collection, and the respective event call (onNewItemAdd) and action button (hideNewItemButton);
• alwaysOpened: to leave the menu always opened;
• enableEditItem: to enable editing and remove of the items. Also added 2 new events: onItemRemove and onIteOption to enable inline editing and removing items. You can also use different icons, just use 'icon-pencil' for the edit button and 'icon-trash' for the delete button;
• toggleCheckAllNone: in case you want to toggle between the "Check all" and Uncheck all", instead of showing both at the same time;
• closeOnMouseOut: close menu when hovering the mouse out of the menu;
• When an item isn't selected, it shows a "cross" glyphicon;
• 'active' class added to the main container so you know when the dropdown list is opened or not (only if you don't use the alwaysOpened setting);
• noSeparators: to do not show separators;
• Added classes (icon-check and icon-uncheck) for the check and uncheck glyphicons, if you don't want to use bootstrap (only for the menu items).

###Install

bower install ng-dropdown-multiselect --save

Full API Documentation

Attributes

List of allowed attributes, you can find more information about them in the usage examples above.

Attribute Name	Type	Description
selected-model	Object / Array	The object the will contain the model for the selected items in the dropdown.
options	Object / Array	The options for the dropdown.
extra-settings	Object	The settings for the directive, more information about these settings are available below.
events	Object	Events callbacks, more information below.
translation-texts	Object	Gives the ability to modify the default texts in the directive. More information below.
group-by	String	The name of the property which you like to group by your options. See grouping example.
search-filter	String	Uses for settings the search filter from outside the direcrtive.

Settings

Available settings that effects the display or behavior of the directive.
These setting are set with the "extra-settings" attribute.

Property Name	Type	Default Value	Description
dynamicTitle	Boolean	true	Indicates if the text of the button should change when selecting items from the list.
closeOnBlur	Boolean	true	Indicates if the dropdown should close when clicking outside of it's scope.
displayProp	String	label	The name of the property that contains the text for the item.
idProp	String	id	The name of the property that contains the id for the elements.
externalIdProp	String	id	The name of the property that will use for the selected items model.
enableSearch	Boolean	false	Show the search input or not.
enableNewItem	Boolean	false	Show an input field at the top to add new items.
hideNewItemButton	Boolean	false	Show a "add button" in the new item input field. Only makes sense if the previous setting is set to "true".
enableEditItem	Boolean	false	Option to enable inline editing and removing items.
selectionLimit	Number	0	The max allowed selected items for the list. For more information see the examples above.
showCheckAll	Boolean	true	Indicates if to show the "Check All" item.
showUncheckAll	Boolean	true	Indicates if to show the "Uncheck All" item.
closeOnSelect	Boolean	false	Indicates if to close the dropdown after checking an item on the list.
closeOnDeselect	Boolean	false	Indicates if to close the dropdown after unchecking an item on the list.
alwaysOpened	Boolean	false	Indicates if the dropdown list should be always opened or not. This ignores any click to close the dropdown list.
noSeparators	Boolean	false	Indicates if you want separator on the dropdown menu (normally between check all / uncheck / search / new item fields.
buttonClasses	String	btn btn-default	The CSS classes that used for setting the style of the button.
groupByTextProvider	Function	angular.noop	A callback to a function that provide that name for each group when using group-by attribute. The parameter for the function will be the value of the group-by property.
scrollable	Boolean	false	Indicates if the dropdown is scrollable, useful if you have a lot of items.
scrollableHeight	Number	300px	Indicates the height of the drop down if the dropdown is scrollable.
smartButtonMaxItems	Number	0	Manages the "Smart Button Text" feature, defines the maximum amount of items to on the button.
smartButtonTextConverter	Function	angular.noop	Related the "Smart Button Text" feature, if a function provided - it will called with two paramters: The item's text and the original item, the return value will displayed instead of the item's display property. This feature is useful when you want to convert the displayed text into something else.

Events

Available event callbacks what the directive fires. These callbacks are set with "events" attribute.

Event Name	Parameters	Description
onItemSelect	item	Fired when selecting an item.
onItemDeselect	item	Fired when unselecting an item.
onSelectAll		Fired when clicking select all.
onDeselectAll		Fired when clicking unselect all.
onInitDone		Fired when the directive done with the "link" phase.
onMaxSelectionReached		Fired when the user reaches the max allowed selected items.
onNewItemAdd	newItem	Fired when the user enters a new item on the input field. Requires "enableNewItem" setting to be true.
onItemEdit	id, label	Fired when the user edits an item. Arguments: the id and the label of the edited item.
onItemRemove	id	Fired when the user removes an item. Arguments: the id of the removed item.

Translation Texts

Available texts that you can override if you wan't to make a translation for your website. These are set with the "translation-texts" attribute.

Property Name	Default Value	Description
checkAll	Check All	"Check All" item's text.
uncheckAll	Uncheck All	"Uncheck All" item's text.
selectionCount	checked	The suffix for "X/Y" that showed when using selection limit.
selectionOf	/	The value between the selected values and the max values when using selection limit.
searchPlaceholder	Search...	The placeholder for the search input.
newItemPlaceholder	New item	The placeholder for the new item input.
buttonDefaultText	Select	The default text that used for the button when no items selected.
dynamicButtonTextSuffix	checked	The suffix for the button that used when using "dynamicText".