Item: Angular-directive-recursion-tree
Rating: 3.4
Author: 19920612

0 Downloads
20 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Angular-directive-recursion-tree</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="treeApp" ng-controller="treeController">
    <div>
    <p>Introduce: Click green block expand the menu tree</p>
    <p>Red: Leaf node, can not click</p>
    <p>Green: Unexpand node, click to expand menu</p>
    <p>Yellow: Expanded node, click to unexpand menu</p>
    </div>
    <tree-view tree-data="jsonData"></tree-view>
</body>

<script type="text/ng-template" id="treeView.html">
    <ul>
        <li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"></li>
    </ul>
</script>

<script type="text/ng-template" id="treeItem.html">
    <span class="color-indictor" ng-class="{'leaf-node': isLeaf(item), 'expand-node': !isLeaf(item) && item.isExpand, 'unexpand-node': !isLeaf(item) && !item.isExpand}" ng-click="toggleExpandStatus(item)"></span>
    <span>{{item.name}}</span>
    <ul ng-if="!isLeaf(item)" ng-show="item.isExpand">
        <li ng-repeat="item in item.children" ng-include="'treeItem.html'"></li>
    </ul>
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/19920612/angular-directive-recursion-tree-rWrRjy */
ul{
    list-style: none;
}
.color-indictor{
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.color-indictor.leaf-node{
    background: red;
}
.color-indictor.unexpand-node{
    background: green;
}
.color-indictor.expand-node{
    background-color: yellow;
}


/*Downloaded from https://www.codeseek.co/19920612/angular-directive-recursion-tree-rWrRjy */
angular.module("treeApp", [])
.controller("treeController", function($scope){
    $scope.jsonData = {
        name: 'menu',
        children: [{
            name: 'A',
            children: [{
                name: 'A.1',
                children: [{
                    name: 'A.1.1',
                    children: []
                }]
            },{
                name: 'A.2',
                children: [{
                    name: 'A.2.1',
                    children: [{
                        name: 'A.2.1.1',
                        children: []
                    }]
                },{
                    name: 'A.2.2',
                    children: []
                }]
            }]
        },{
            name: 'B',
            children: [{
                name: 'B.1',
                children: []
            },{
                name: 'B.2',
                children: []
            }]
        },{
            name: 'C',
            children: []
        }]
    };
}).directive('treeView', function(){
    return {
        restrict: 'E',
        templateUrl: 'treeView.html',
        scope: {
            treeData: '='
        },
        controller: function($scope){
            $scope.isLeaf = function(item){
                return !item.children || !item.children.length;
            };
            $scope.toggleExpandStatus = function(item){
                item.isExpand = !item.isExpand;
            };
        }
    };
});

Comments

More from 19920612

Angular-directive-recursion-tree

In this example below you will see how to do a Angular-directive-recursion-tree with some HTML / CSS and Javascript

Technologies

Comments

More from 19920612

Hello React(JSX)

Hello React(ES5)

Hello React(JS)

Grey Plane

You Might Also Like

New Personal Website [WIP]

A Pen by Koussay Fridhi

Build A Recipe Box (ReactJS)

A Pen by tim.blake@warwicksu.com

A Pen by Michael Webb

Responsive columns

A Pen by robert

A Pen by Devin