AngularJS Dropdown Tree

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.
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
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)

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.

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.