Light AngularJS tree widget control, without jQuery dependency.

The tree widget control is an angular UI component, independent from jQuery, which binds data and reacts to model changes. The control is absolutely free, open source and distributed under the MIT license.

Features:

Reacts at model changes
Isolated scope
Easy customizable using css
Custom icons[or no icons at all]
Multiple selection
Disabled nodes

Installation:

  1. Download the project.
  2. Load the style sheet file angular-tree-widget.min.css and the script file angular-tree-widget.min.js in your application.
  3. Add 'TreeWidget' dependency to your application module.
  4. Add data for the tree $scope.treeNodes =[{....}], and add tree tag to your html page.
  5. Do not forget to add references to AngularJS, AngularJS Animate and Angular Recursion.

Browser suport:

Was tested on IE11 and all modern browser. It might work on other
browser and/or older versions but it wasn't tested.

Basic usage:

Just add the following tag into your page: <tree nodes='basicTree'></tree>, and after that the tree will react to any model changes. 

$scope.basicTree=[{
        name: "Node 1",
        children: [{
            name: "Node 1.1",
            children:[{name:"Node 1.1.1"},{name: "Node 1.1.2"}]
        }]},{
        name: "Node 2",
        children: [{name: "Node 2.1"},{name: "Node 2.2"}]
    }]

Custom Images

Sometimes changing the image of a certain node might be required. With the angular tree widget it is as easy as setting the value of a JavaScript object:

image: "/demo/app/images/pdf.png" 

 $scope.customTree = [{
    name: "My Files",
    image: "/demo/app/images/disk.png",
    children: [
        { name: "Pro AngularJS", image: "/demo/app/images/pdf.png" },
        { name: "Presentation", image: "/demo/app/images/ppt.png" },
        { name: "Requirements", image: "/demo/app/images/word.png" },
        { name: "TODO list" }]
}];

Disabled Nodes

In case that you want to prevent the node selection, just set the disable property of the model: disabled: true. 

$scope.disabledNodes = [{
    name: "My Files", disabled: true,
    children: [{
        name: "Angular books",
        children: [
            { name: "Pro AngularJS", image: "/app/images/pdf.png" },
            { name: "AngularJS: Up and Running", image: "/app/images/pdf.png" }, ]
        }, {
            name: "Work", disabled: true,
            children: [
                { name: "Presentation", image: "/app/images/ppt.png", disabled: true },
                { name: "Requirements", image: "/app/images/word.png" },
                { name: "TODO list", disabled: true }]
    }]
}];

Changing the tree

With each model update (add/remove/rename node) the tree will automatically refresh itself.

Add new node under selected node:

Remove selected node:

Rename selected node: 

$scope.disabledNodes = [{
    name: "My Files", disabled: true,
    children: [{
        name: "Angular books",
        children: [
            { name: "Pro AngularJS", image: "/app/images/pdf.png" },
            { name: "AngularJS: Up and Running", image: "/app/images/pdf.png" }, ]
        }, {
            name: "Work", disabled: true,
            children: [
                { name: "Presentation", image: "/app/images/ppt.png", disabled: true },
                { name: "Requirements", image: "/app/images/word.png" },
                { name: "TODO list", disabled: true }]
    }]
}];

Events

The control supports events two events:

  • selection-changed - click on one node.
  • expanded-state-changed - click on the expand/collapse arrow.

N/A
- expandedcollapsed N/A 
$scope.$on('selection-changed', function (e, node) {
    //node - selected node in tree
    $scope.selectedNode = node;
});
$scope.$on('expanded-state-changed', function (e, node) {
    // node - the node on which the expanded state changed
    // to see the current state check the expanded property
    //console.log(node.expanded);
    $scope.exapndedNode = node;    
});

Advance use - Multiple select and No icons

To enable the advance mode, you have to use the tree option. <tree nodes='treeNodes' options='options'></tree>

  • To enable multiple selection set options.multipleSelect=true.
  • To remove the icons set options.showIcon=false.

Selected nodes:

{{node.name}}

N/A

Advance use - Expand on label click

To enable the label click expand/collapse set the options.expandOnClick=true.

N/A
- expandedcollapsed N/A