Angular IVH Treeview

IVH Treeview aims to provide a robust and flexible tree control for angular applications. We're obsessed with making things customizable while providing sensible defaults.

Features include:

• Checkbox support
• Fully customizable tree nodes; skin with CSS or provide your own templates
• Built in callbacks for expand/collapse and checkbox changes
• Services for traversing and interacting with your trees programmatically
• And more...

Get it

IVH Treeview can be installed with Bower and npm:

bower install angular-ivh-treeview

or

npm install angular-ivh-treeview

Of course you can always clone the repository which will include a distribution version of the module.

Once installed, simply include the following scripts/styles on your page:

• dist/ivh-treeview.js
• dist/ivh-treeview.css
• dist/ivh-treeview-theme-basic.css (optional minimalist theme)

Usage

IVH Treeview can work with any tree data. It can even be configured to work with your property names (i.e. children, items, etc.) so there is no data massaging necessary.

var app = angular.module('myApp', [
  'ivh.treeview'
]);

app.controller('DemoCtrl', function() {
  this.stuff = [{
    label: 'Suitcase',
    children: [ /* ... */ ]
  }];
});

<div ng-controller="DemoCtrl as demo">
  <div ivh-treeview="demo.stuff">
  </div>
</div>

See the project README for more detailed usage information.

This demo showcases the use of callback expressions for user-initiated toggle and select actions. Note that in either case you have access to scope variables corresponding to the affected node and the tree that contains it.

• Last toggled node: {{silly.lastToggle || 'none yet...'}}
• Last selected/deselected node: {{silly.lastSelect || 'none yet...'}}

View

<div ivh-treeview="silly.stuff"
  ivh-treeview-default-selected-state="false"
  ivh-treeview-expand-to-depth="-1"
  ivh-treeview-on-toggle="silly.setLastToggle(ivhNode, ivhTree)"
  ivh-treeview-on-cb-change="silly.lastSelect = ivhNode.label">
</div>

Tree nodes are fully customizable. The tree at right makes use of a user defined directive specified inline as transcluded content. The node template leverages helper directives provided by IVH Treeview to easily place child nodes and get twistie functionality.

<div ivh-treeview="silly.stuff"
    ivh-treeview-default-selected-state="false"
    ivh-treeview-expand-to-depth="-1"
    ivh-treeview-twistie-expanded-tpl="'V'"
    ivh-treeview-twistie-collapsed-tpl="'>'"
    ivh-treeview-twistie-leaf-tpl="'-'">
  <script type="text/ng-template">
    <silly-tree-node></silly-tree-node>
  </script>
</div>

These tree nodes can be edited (try clicking a node label), deleted, and new nodes can be spawned as children. We're also using some fun custom ASCII art checkboxes.

Try it out.

Keep in mind that selections (i.e. checkboxes) are filter independent. In other words, filtered away nodes will still be affected by parent selection changes.

Filtering trees is just like applying filters in any other angular expression. In fact we leverage the same mechanism so your favorite built in angular filters should work just as well as your custom ones.

More

See the project README for more information and examples.