AngularJS dropdown tree is a dropdown selection component specificaly build for options that can be ordered in a tree structure. On this page you can find a simple example and some documentation on how to configure the component.
bower install angularjs-dropdown-tree
npm install angularjs-dropdown-tree
{{$ctrl.options | json}}
Name | Required | Type | Use |
options | Yes | Array of Objects | The selectable options |
selection-changed | Yes | function(selection) | Will be called every time the selection changes. |
settings | No | Object | Configures the component |
selection | No | Array of Objects | Can be used to set the selection externaly, all objects in the array should also be in the options Array. |
texts | No | Object | Configures the static texts in the component |
Should be an array of objects with a name (or a property that can be used as a name), and optionaly an array of child objects with the same structure.
An object used to configure the component, all the properties are optional.
Name | Default value | Type | Use |
displayProperty | 'name' | string | The property of the option that should be used to display it. |
childrenProperty | 'children' | string | The property that holds the child options. |
subProperty | null | string | The property that holds the subFolder options. These will be displayed using the subClass and subClosedClass. The childrenProperty will always be taken first so an option will never be a folder and a subFolder |
selectedClass | ['glyphicon', 'glyphicon-ok'] | string or array of string | When an option is selcted a span is added with the classes configured |
folderClass | ['glyphicon', 'glyphicon-folder-open'] | string or array of strings | Class of the span before the name of an option when the option is a folder and the folder is opened |
folderClosedClass | ['glyphicon', 'glyphicon-folder-close'] | string or array of strings | Class of the span before the name of an option when the option is a folder and the folder is closed |
subClass | ['glyphicon', 'glyphicon-minus'] | string or array of strings | Class of the span before the name of an option when the option is a subFolder and the subFolder is opened |
subClosedClass | ['glyphicon', 'glyphicon-plus'] | string or array of strings | Class of the span before the name of an option when the option is a subFolder and the subFolder is closed |
childClass | ['glyphicon', 'glyphicon-file'] | string or array of strings | Class of the span before the name of an option when the option is not a folder |
dropdownToggleIconClass | ['caret'] | string or array of strings | Class of caret icon in the dropdown-toggle |
closeOnBlur | true | boolean | When true will close the dropdown when clicked outside of it. |
folderSelectable | true | boolean | When true a folder is selectable otherwise only children can be selected |
disableSearch | false | boolean | When false an input field that enables filtering the options will be available |
selectionLimit | 0 | int | Limits the amount of options that can be selected at the same time (when 0, no limit) |
removeFromFront | true | boolean | When selectoinLimit is set, defines if on selection the limit would be passed from where in the array an option should be removed (front/back) |
getButtonText | undefined | function | Should return the string that you want to display in the dropdown toggle. Is called with as first argument the current selection, second argument the selection-array and third argument the texts object. |
foldersOpen | true | boolean | Defines if all folders should be open by default. |
openFolderWhenInnerSelected | false | boolean | Only applicable when foldersOpen set to false. Will still open a folder when a child is selected. |
closeOnSelectionLimitReached | false | boolean | Only applicable when selectionLimit different from 0. Will close the dropdown when selection reaches the specified selectionLimit |
sortByDisplayProperty | false | boolean | Will sort the options by the displayProperty |
An object used to configure the texts used in the component, all the properties are optional and strings.
Name | Default value | Use |
optionNames | 'items' | Used in the dropdown-toggle to indicate what needs to be selected. |
The component offers some basic keyboard controls: