ng-tree-select

Angular tree select component

What is this?

This is angular.js widget to help user select single item from hierarchical structure using common controls: radio buttons, checkboxes and selects.

What can this do?

$3

- The widget generates repeated layout for each level of depth, easily customizable with CSS.
- The widget can choose way how children are displayed on each level based on collection size.
- Unselected branches are automatically hidden.
- Shown/hidden sections are animated with slide down/up.
- The widget will mark selected item on each level with active flag, as well as adding active property to collection of children.

$3

- Make model properties customizable (currently hardcoded as name, children and active).
- Make threshold to switch between radio/select configurable (currently hardcoded to 10). Also add option to suppress checkboxes.
- Support ngModel on the widget to automatically track the selection and external changes to model.

What can NOT this do?

- Display custom structures for items.
- Lazily request data for populated children.
- Provide access to events on rendered items.

Example

``javacript
//...
$scope.items = [
{ name: 'Option 1', children: [
{ name: 'Option 1.1', children: [
{ name: 'Option 1.1.1' }
]}, { name: 'Option 1.2' }
]}, { name: 'Option 2', children: [
{ name: 'Option 2.1' },
{ name: 'Option 2.2' },
{ name: 'Option 2.3' },
{ name: 'Option 2.4' },
{ name: 'Option 2.5' },
{ name: 'Option 2.6' },
{ name: 'Option 2.7' },
{ name: 'Option 2.8' },
{ name: 'Option 2.9' },
{ name: 'Option 2.10' }
]}
];
//...
`

`HTML

`

Notes and details


Make sure to include ngAnimate` to your application to enable slide-down/up effect.