Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app>
  <head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
​
  </head>
  <body>
    <div ng-controller="exprCtrl">
        Angular Tree Test
        <ul>
          <li ng-repeat="node in nodes">
            {{ addEndUL($index) }}
            {{ node.text }}
            {{ addStartUL($index) }}
          </li>
        </ul>
    </div>
  </body>
</html>
 
function exprCtrl($scope) {
    $scope.nodes = [
      {
        text: "Node 0",
        depth: 0
      },
      {
        text: "Node 0-0",
        depth: 1
      },
      {
        text: "Node 1",
        depth: 0
      }          
    ];
    
    // Adds a UL element if the depth of the tree is about to increase
    $scope.addStartUL = function (ind) {
      current_node = $scope.nodes[ind];
      next_node = $scope.nodes[ind+1];
      if (!next_node) {
        // End of the list
        return;
      }
      if (next_node.depth > current_node.depth) {
        return "<ul>";
      }
    };
    
    // Adds a closing UL tag if the depth of the tree has decreased
    $scope.addEndUL = function (ind) {
      if (ind === 0) {
        return;
      }
      current_node = $scope.nodes[ind];
      prev_node = $scope.nodes[ind-1];
      if (current_node.depth < prev_node.depth) {
        return "</ul>";
      }
    };
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JonAbramspro
0viewers