Pure Angular control, without any jQuery reference

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

Instalation:

  1. Download the project.
  2. Load the css 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. Do not forget to add references to angular, angular 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 automaticlay 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 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.expandedNode = node;
});

Events using functions

The control supports two functions defined in options:

  • onSelectNode - click on one node
  • onExpandNode - click on the expand/collapse arrow

N/A
- expandedcollapsed N/A
$scope.basicOptions = {
    showIcon: true,
    onSelectNode : function (node) {
        $scope.selectedNode = node;
    },
    onExpandNode : function (node) {
        console.log(node);
        $scope.expandedNode = 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 - Multiple select with control key

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

  • To enable multiple selection with a key control set options.multipleSelect='ctrlKey' or 'altKey'

Selected nodes:

{{node.name}}

N/A


Advance use - Expand on label click

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

N/A
- expandedcollapsed N/A

Advance use - Filter elements

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

  • To enable filter feature set options.filter={} and bind any other element to this field

  • In this example you can filter by name or by image path

Selected nodes:

{{node.name}}

N/A

Name: Image:
$scope.options = {
    multipleSelect: 'ctrlKey',
    showIcon: true,
    filter : {}
};