ng-dropdown-multiselect-pair

AngularJS Dropdown Multiselect directive


Keywords
angular, angularjs, directive, dropdown, multiselect, checklist, list, bootstrap, checkbox
License
MIT
Install
bower install ng-dropdown-multiselect-pair

Documentation

#AngularJS Dropdown Multiselect (for a "pair")

This package was forked from https://github.com/semeano/ng-dropdown-multiselect and the main difference is that the dropdown menu list is composed by a pair of values. In the example app I'm using person names and ages, but you can use whatever you want.

###Install

bower install ng-dropdown-multiselect-pair --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 Indicated if to show the search input or not.
enableNewItem Boolean false Indicated if to show the new item input or not.
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.
onUnselectAll 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, extra Fired when the user edits an item. Arguments: the id, the label and the extra value 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','Value'] 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".