View project on
GitHub

AngularJS Dropdown Tree

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

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.