Usage

The directive is tree-view and has several configuration options available via attributes.

The input data should be an array of objects, each with an id and parent id.

Input Objects $$tree Property

The objects used as input for the directive can have a $$tree property, which is an object used to override the default behavior for an item in the tree. This $$tree property can contain two flags, canSelect and expanded, which the tree view with respect.

Attributes

Attribute	Type	Description
ng-model Required	Reference Two-Way binding	Output will be placed in this variable. For Multi-select, will be an array. For single select it will be a single item.
tree-data Required	Reference One-Way binding	Should be set to the primary tree data source. Should be array of objects.
multiple Optional	Flag No binding	If present, allows for multiple items to be selected at once.
leaf-only Optional	Flag No binding	If present, only items without children can be selected.
dropdown Optional	Flag No binding	If present, will use dropdown UI template.
select-children-with-parent Optional	Flag No binding	Only works with multi-select mode. If present, will select all children when parent is selected.
deselect-children-with-parent Optional	Flag No binding	Only works with multi-select mode. If present, will deselect all children when parent is deselected.
order-by Optional	Value No binding	Should be set a property name. If present, will use assigned property to order the tree data. The ordering is applied to each level of tree structure.
filter-by Optional	Value No binding	Only works with dropdown mode. Should be set a property name, or multiple property names delimited by spaces and/or commas. If present, will use assigned property to order the tree data. The ordering is applied to each level of tree structure.
item-id-property Optional, Default: "id"	Value No binding	Should be set a property name. Used to determine the id for an object.
parent-id-property Optional, Default: "parentId"	Value No binding	Should be set a property name. Used to determine the parent id for an object.
item-output-property Optional	Value No binding	Should be set a property name. If present, ng-model will be assigned this property value rather than the full object.
display-property-tree Optional, Default: "name"	Value No binding	Should be set a property name. Used to display value for object within tree structure.
display-property-dropdown Optional, Default: "name"	Value No binding	Should be set a property name. Used to display value for object within selected section of dropdown.
dropdown-placeholder Optional, Default: "Select something..."	Value No binding	Should be a string value. Shown in dropdown area when nothing has been selected.
dropdown-search-placeholder Optional, Default: "Search..."	Value No binding	Should be a string value. Shown in filter textbox within the dropdown. Only used when filter-by is present.

Select Data

{{activeData | jsonPrint}}

Core Trees

Multiple Select

Output: {{selected[0]}}

Single Select

Output: {{selected[1]}}

Multiple Select (Leaf Only)

Output: {{selected[2]}}

Single Select (Leaf Only)

Output: {{selected[3]}}

Dropdowns

Multiple Select

Output: {{selected[4]}}

Single Select

Output: {{selected[5]}}

Dropdowns with Filtering

Multiple Select

Output: {{selected[6]}}

Single Select

Output: {{selected[7]}}

Dropdowns with Child-Parent Selection Behavior

Multiple Select: Select Children with Parent

Output: {{selected[8]}}

Multiple Select: Deselect Children with Parent

Output: {{selected[9]}}

Multiple Select: Select & Deselect Children with Parent

Output: {{selected[10]}}

Dropdowns with Shifting Output

Current Output: {{output.shifting}}
All Output: {{shifting}}
Current Output: {{output.shiftingSingle}}
All Output: {{shiftingSingle}}

With Alternate Output

Current Output: {{output.shiftingAlt}}
All Output: {{shiftingAlt}}
Current Output: {{output.shiftingSingleAlt}}
All Output: {{shiftingSingleAlt}}