AngularJS: nested list

Forked from: http://jsfiddle.net/vzvmS/40/

by Norfeldt

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>


<script type="text/ng-template" id="my-tmpl">
	<div class="span3">
  <textarea class="span3">{{data.name}}</textarea>
  
  <br>
  <button class="btn btn-success" ng-click="add(data)" ng-show="levelLimit(data)">
    Add node to {{data.name}} </button>

  <button class="btn btn-danger" ng-click="delete(data)" ng-show="hasNodes(data)">
    Delete nodes </button>
	</div>
  
  <ul>
    <li ng-repeat="data in data.nodes" ng-include="'my-tmpl'"></li>
  </ul>
</script>

<ul ng-controller="TreeController">
  <li ng-repeat="data in tree" ng-include="'my-tmpl'"></li>
</ul>

CSS

li {
  display: inline-flex;
  border: 1px solid #000;
  padding: 0px;
  list-style: none;
}

li li {
  display: flex;
}

JavaScript

angular.module("myApp", [])
  .controller("TreeController", function($scope) {
  	var maxNoColumns = 4;
    var levelLimit = function(data) {
      if (data.level < maxNoColumns) {
        return true;
      } else {
        return false;
      };
    };

    var addNode = function(data) {
      var post = data.nodes.length + 1;
      var newName = data.name + '-' + post;
      var newLevel = data.level + 1;
      if (levelLimit(data)) {
        var node = {
          name: newName,
          nodes: [],
          level: newLevel
        };
        data.nodes.push(node);
        addNode(node);
      }
    };

    $scope.tree = [{
      name: "Node",
      nodes: [],
      level: 1
    }];

    $scope.hasNodes = function(data) {
      return (data.nodes.length > 0)
    };

    $scope.levelLimit = levelLimit;

    $scope.delete = function(data) {
      data.nodes = [];
    };

    $scope.add = addNode;
  });