##Important: Please keep in mind that this is an ongoing project. :)
#AngularJS Dropdown Multiselect
This package was forked from https://github.com/semeano/ng-dropdown-multiselect and the only differences from the original are:
- you can chose use font-awsome or glyphicon(default).
###Install bower install ac-dropdown-multiselect --save
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. |
| use-font-awesome | String | Uses for settings font-awesome as icon library. |
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. |
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 | 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. |
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". |