Angular: Treeview example

A simple treeview implemented with angular and ngInclude

by Richard Houltz

HTML

<script type="text/ng-template" id="tree_item.html">
        
    <span ng-click="data.expanded = !data.expanded">
        <span ng-show="data.nodes.length == 0" class="glyphicon glyphicon-record">*</span>
        <span ng-show="data.nodes.length > 0 && !data.expanded" class="glyphicon glyphicon-folder-close">+</span>
        <span ng-show="data.nodes.length > 0 && data.expanded> 0" class="glyphicon glyphicon-folder--open">-</span>
        {{data.name}}
    </span>
    <button ng-click="add(data)" class="btn btn-primary btn-xs">Add child</button>
    <button ng-click="delete(data)" class="btn btn-danger btn-xs" ng-show="data.$parent">Remove</button>

    <ul ng-if="data.expanded" class="list-unstyled">
        <li ng-repeat="data in data.nodes" ng-include="'tree_item.html'" style="margin-left: 20px"></li>
    </ul>
</script>


<div ng-controller="TreeController">
    <span>Treeview:</span>
    <ul>
        <li ng-repeat="data in tree" ng-include="'tree_item.html'"></li>
    </ul>

    <hr/>
    <span>Data:</span>
    <pre>{{tree | json}}</pre>
</div>

JavaScript

var myApp = angular.module('myApp', [])

    .controller("TreeController", ['$scope', function ($scope) {
    $scope.delete = function (data) {
        for (var i = 0; i < data.$parent.nodes.length; i++) {
            if (data.$parent.nodes[i] === data) {
                data.$parent.nodes.splice(i, 1);
            }
        }
        data.nodes = [];
    };

    $scope.add = function (data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({
            name: newName,
            nodes: [],
            expanded: true,
            $parent: data
        });
    };

    $scope.tree = [{
        name: "Node",
        nodes: [],
        expanded: true
    }];
}]);