Pure AngularJs TreeView

Implementation steps

Step 1: Install ADM-treeView


                        npm install adm-trv
                        bower install adm-trv

Step 2: Include the files in your app


                        <!doctype html>
                        <html ng-app="myApp">
                            <head>
                                <link rel="stylesheet" href="css/ADM-treeView.min.css" />
                                <script src="js/angular.min.js"></script>
                                <script src="js/ADM-treeView.min.js"></script>
                                ...
                            </head>
                            <body>
                            ...
                            </body>
                        </html>

Step 3: Inject the ADM-treeView module


                        var app = angular.module('myApp', ['ADM-treeView']);

Step 4: Add the adm-trv directive to a DOM element


                        <adm-trv ng-model="model"></adm-trv>

Options

Set options for entire of app


                        app.config(['ADMtrvProvider', function(ADMtrv) {
                            ADMtrv.setConfigs({
                                childName: 'kids',
                                title: '$item.mainDS.title',
                                trackBy: '$item.mainDS.id',
                                dictionary: {
                                    noItem: ' :( '
                                },
                                ...
                            });
                        }]);

Set options for each directive


                        <!-- pass options from controller -->
                        <adm-trv ng-model="ctrl.model1" configs="tree1Options"></adm-trv>
                        <!-- or write them inline -->
                        <adm-trv ng-model="ctrl.model1" configs="{childName: 'levels', readOnly: true}"></adm-trv>

Example:

tree1Options
{{ tree1Options | json}}

ctrl.model1
{{ctrl.model1 || [] | json}}

{childName: 'levels', readOnly: true}
{{ {childName: 'levels', readOnly: true} | json}}

Quick look

Name	Type	Default	Description
{{item.name}}	{{item.type}}	{{item.default}}

onKidOpen event

In readOnly mode 'onKidOpen' event fire whenever the tree leafs clicked! You can return HTML content directly or by promise to show under leaf.


                        // return string
                        $scope.tree2_2Options = {
                            childName: 'categories',
                            readOnly: true,
                            onKidOpen: function(node) {
                                return 'The Node title is: "' + node.title + '"';
                            }
                        }
                        
                        // return promise
                        $scope.tree2_2Options = {
                            childName: 'categories',
                            readOnly: true,
                            onKidOpen: function(node) {
                                var deferred = $q.defer();
                                setTimeout(function() {
                                    deferred.resolve('The Node title is: "' + node.title + '"');
                                }, 2000);
                                return deferred.promise;
                            }
                        }

Example:

tree2Options
{{ tree2Options | json}}

ctrl.model1
{{ctrl.model2 || [] | json}}

tree2_2Options

                                {
                                    childName: 'categories',
                                    readOnly: true,
                                    onKidOpen: function(node) {
                                        var deferred = $q.defer();
                                        setTimeout(function() {
                                            deferred.resolve('The Node title is: "' + node.title + '"');
                                        }, 2000);
                                        return deferred.promise;
                                    }
                                }

onAdd event

The 'onAdd' event fire on adding item to tree.
In case you want to post each node to server on add event, you can return promise to adm-trv to add node after server response.
Return value can be 'Object' or 'Boolean'.

Boolean: adm-trv continue adding node to tree by catching 'true' value.
Object: In case server add 'Id' to your object after inserting to DB, that might be need for further editing or deleting, adm-trv will extend client object with your returned object. Return false to avoid adding node to tree.


                        // return Booelan
                        $scope.tree3_1Options = {
                            childName: 'organizations',
                            dictionary: {
                                titlePlaceholder: 'A-Z only ...'
                            },
                            onAdd: function(parentNode, newNode, titleOnly) {
                                return !/[^a-zA-Z]/.test(titleOnly);
                            }
                        }
                        
                        //return promise
                        $scope.tree3_2Options = {
                            childName: 'organizations',
                            onAdd: function(parentNode, newNode, titleOnly) {
                                var deferred = $q.defer();
                                setTimeout(function() {
                                    deferred.resolve({
                                        id: Math.floor(Math.random() * 1000)
                                    });
                                }, 500);
                                return deferred.promise;
                            }
                        }

Example:

tree3_1Options

                                {
                                    childName: 'organizations',
                                    dictionary: {
                                        titlePlaceholder: 'A-Z only ...'
                                    },
                                    onAdd: function(parentNode, newNode, titleOnly) {
                                        return !/[^a-zA-Z]/.test(titleOnly);
                                    }
                                }

ctrl.model3_1
{{ctrl.model3_1 || [] | json}}

tree3_2Options

                                {
                                    childName: 'organizations',
                                    onAdd: function(parentNode, newNode, titleOnly) {
                                        var deferred = $q.defer();
                                        setTimeout(function() {
                                            deferred.resolve({
                                                id: Math.floor(Math.random() * 1000)
                                            });
                                        }, 500);
                                        return deferred.promise;
                                    }
                                }

ctrl.model3_2
{{ctrl.model3_2 || [] | json}}

onEdit & onDelete events


                        // return Booelan
                        $scope.tree4_1Options = {
                            onEdit: function (currentNode, parentNode) {
                                return true; // or False
                            },
                            onDelete: function (currentNode, parentNode) {
                                return true; // or False
                            }
                        }
                        

                        //return promise
                        $scope.tree4_2Options = {
                            onEdit: function (currentNode, parentNode) {
                                var deferred = $q.defer();
                                setTimeout(function() {
                                    deferred.resolve(true); // or False
                                }, 500);
                                return deferred.promise;
                            },
                            onDelete: function (currentNode, parentNode) {
                                var deferred = $q.defer();
                                setTimeout(function() {
                                    deferred.resolve(true); // or False
                                }, 500);
                                return deferred.promise;
                            }
                        }

Selectable


                        <adm-trv ng-model="ctrl.model4_1" selected="ctrl.model4_1Selected" configs="tree4_1Options"></adm-trv>
                        <adm-trv ng-model="ctrl.model4_2" selected="ctrl.model4_2Selected" configs="tree4_2Options"></adm-trv>


                        $scope.ctrl.model4_1Selected = [];
                        $scope.tree4_1Options = {
                            childName: 'bAghAlies',
                            selectable: true
                        }
                        
                        $scope.ctrl.model4_2Selected = [];
                        $scope.tree4_2Options = {
                            childName: 'bAghAlies',
                            title: '$item.mainBAghAliDS.title',
                            trackBy: '$item.mainBAghAliDS.id',
                            selectable: true
                        }

Example:

ctrl.model4_1Selected
{{ctrl.model4_1Selected | json}}

tree4_1Options
{{ tree4_1Options | json}}

ctrl.model4_1
{{ctrl.model4_1 | json}}

ctrl.model4_2Selected
{{ctrl.model4_2Selected | json}}

tree4_2Options
{{ tree4_2Options | json}}

ctrl.model4_2
{{ctrl.model4_2 | json}}

Dictionary


                        $scope.tree5_1Options = {
                            childName: 'golAbies',
                            dictionary: {
                                noItem: 'No golAbi! :(',
                                titlePlaceholder: 'Type ...',
                                rootAddBtn: 'Add main golAbi',
                                confirmBtn: 'YES',
                                cancelBtn: 'NO'
                            }
                        }

                        $scope.tree5_2Options = {
                            childName: 'golAbies',
                            direction: 'rtl',
                            dictionary: {
                                noItem: 'موردی وجود ندارد!',
                                titlePlaceholder: 'عنوان ...',
                                rootAddBtn: 'افزودن',
                                confirmBtn: 'تایید',
                                cancelBtn: 'انصراف'
                            }
                        }