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.

## Instalation

### Recomended

1. Using bower:

       bower install angularjs-dropdown-tree

2. Using npm:

       npm install angularjs-dropdown-tree

### Not recommended

1. Using rawgit: link
2. Getting the source from here

## Examlpe

### Example options

    {{$ctrl.options | json}}

### Example settings

selectionLimit:
removeFromFront
displayProperty:
childrenProperty:
subProperty:
disableSearch
closeOnBlur
folderSelectable
foldersOpen
openFolderWhenInnerSelected
closeOnSelectionLimitReached
sortByDisplayProperty

## Documentation

### Overview of attributes

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

### Options

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.

### Settings

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

### Texts

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.

### Keyboard controls

The component offers some basic keyboard controls:

- Navigate between options with arrow keys.
- Selecting options using Enter.
- Closing dropdown using Escape.
- Opening folder with right arrow key
- Closing folder with left arrow key

Also some more advanced controls are available:

- When the search is focused:
  - When current selection doesn't match search, the search will be the new selection.
  - When current selection matches the current search, the selection will be cleared.