0.2.0 • Published 6 years ago
ng-tree-select v0.2.0
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?
Already implemented
- 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 addingactive
property to collection of children.
Planned
- Make model properties customizable (currently hardcoded as
name
,children
andactive
). - 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
//...
$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' }
]}
];
//...
<tree-select items="items"></tree-select>
Notes and details
Make sure to include ngAnimate
to your application to enable slide-down/up effect.