UI-Tree Testing

by Rishi Kumar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.16.0/angular-ui-tree.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.16.0/angular-ui-tree.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <!-- Nested node template -->
    <script type="text/ng-template" id="nodes_renderer.html">
      <div ui-tree-handle  data-nodrag class="tree-node tree-node-content">
        <a class="btn btn-success btn-xs pull-right" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
        class="glyphicon"
        ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
        }"></span></a>
        <a class="btn pull-right" ng-if="node.nodes.length == 0"><span class="glyphicon glyphicon-option-vertical"> </span> </a>{{node.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
        <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
        </li>
      </ol>
    </script>

    <div class="row">
      <div class="col-sm-12">
        <h3>Basic Example</h3>

        <button ng-click="expandAll()">Expand all</button>
        <button ng-click="collapseAll()">Collapse all</button>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <div ui-tree id="tree-root">
          <ol ui-tree-nodes ng-model="data">
            <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
          </ol>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="info">
          {{info}}
        </div>
        <pre class="code">{{ data | json }}</pre>
      </div>
    </div>
  </div>
</div>

CSS

.btn {
  margin-right: 8px;
}

.angular-ui-tree-handle {
  background: #f8faff;
  border: 1px solid #dae2ea;
  color: #7c9eb2;
  padding: 10px 10px;
}

.angular-ui-tree-handle:hover {
  color: #438eb9;
  background: #f4f6f7;
  border-color: #dce2e8;
}

.angular-ui-tree-placeholder {
  background: #f0f9ff;
  border: 2px dashed #bed2db;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

tr.angular-ui-tree-empty {
  height: 100px
}

.group-title {
  background-color: #687074 !important;
  color: #FFF !important;
}


/* --- Tree --- */

.tree-node {
  border: 1px solid #dae2ea;
  background: #f8faff;
  color: #7c9eb2;
}

.nodrop {
  background-color: #f2dede;
}

.tree-node-content {
  margin: 10px;
}

.tree-handle {
  padding: 10px;
  background: #428bca;
  color: #FFF;
  margin-right: 10px;
}

.angular-ui-tree-handle:hover {}

.angular-ui-tree-placeholder {
  background: #f0f9ff;
  border: 2px dashed #bed2db;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

li[collased="false"]{
  background-color: #f9f9fb !important;
}

JavaScript

angular.module('myApp', ['ui.tree'])
  .controller('myCtrl', function($scope) {
    $scope.remove = function(scope) {
      scope.remove();
    };

    $scope.toggle = function(scope) {
      scope.toggle();
    };

    $scope.moveLastToTheBeginning = function() {
      var a = $scope.data.pop();
      $scope.data.splice(0, 0, a);
    };

    $scope.newSubItem = function(scope) {
      var nodeData = scope.$modelValue;
      nodeData.nodes.push({
        id: nodeData.id * 10 + nodeData.nodes.length,
        title: nodeData.title + '.' + (nodeData.nodes.length + 1),
        nodes: []
      });
    };

    $scope.collapseAll = function() {
      $scope.$broadcast('angular-ui-tree:collapse-all');
    };

    $scope.expandAll = function() {
      $scope.$broadcast('angular-ui-tree:expand-all');
    };

    $scope.data = [{
      'id': 1,
      'title': 'node1',
      'nodes': [{
        'id': 11,
        'title': 'node1.1',
        'nodes': [{
          'id': 111,
          'title': 'node1.1.1',
          'nodes': []
        }]
      }, {
        'id': 12,
        'title': 'node1.2',
        'nodes': []
      }]
    }, {
      'id': 2,
      'title': 'node2',
      'nodrop': true, // An arbitrary property to check in custom template for nodrop-enabled
      'nodes': [{
        'id': 21,
        'title': 'node2.1',
        'nodes': []
      }, {
        'id': 22,
        'title': 'node2.2',
        'nodes': []
      }]
    }, {
      'id': 3,
      'title': 'node3',
      'nodes': [{
        'id': 31,
        'title': 'node3.1',
        'nodes': []
      }]
    }];
  });