Treeview

Treeview using angularjs

HTML

<link rel="stylesheet" href="//wix.github.io/angular-tree-control/css/tree-control.css">
<link rel="stylesheet" href="//wix.github.io/angular-tree-control/css/tree-control-attribute.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<div ng-app="app">
  <div ng-controller="myController">
    <span treeview></span>
  </div>
  <script type="text/ng-template" id="temp.html">
    <treecontrol class="tree-classic" tree-model="treedata" selected-nodes="selectedNodes" on-selection="showSelected(node, selected)" options="treeOptions"> label: {{node.label}} ({{node.id}})
    </treecontrol>
  </script>
</div>

CSS

.chzntree-search-results .treeselect-title {
  margin-left: 41px !important;
}

JavaScript

angular.module('app', ['treeControl'])
  .controller('myController', function() {

  })
  .directive('treeview', function() {
    return {
      templateUrl: 'temp.html',
      link: function($scope, elem, attr) {
        $scope.treeOptions = {
          multiSelection: true
        };
        $scope.selectedNodes = [];
        $scope.treedata = createSubTree(3, 4, "");

        $scope.lastClicked = null;

        function createSubTree(level, width, prefix) {
          if (level > 0) {
            var res = [];
            for (var i = 1; i <= width; i++)
              res.push({
                "label": "Node " + prefix + i,
                "id": "id" + prefix + i,
                "i": i,
                "children": createSubTree(level - 1, width, prefix + i + ".")
              });
            return res;
          } else
            return [];
        }
      }
    }
  });