[SOLVED] AngularJS recursive template close by default all nodes and expand them with ng-click

AngularJS recursive template close by default all nodes and expand them with ng-click

is it possible with this example from Ben Foster to get all nodes closed by default (at the loading of the page) ? and to open each node with ng-click ?

http://jsfiddle.net/benfosterdev/NP7P5/

I have found a way to get selected node but I don't know how to combine it with ng-click and eventually ng-show or ng-hide:

ng-click='nodeSelected($event, category)'

and in controller

$scope.nodeSelected = function($event, category){
    $event.stopPropagation();
    console.log('This node is selected' + category);
}

Solution

Just found a similar example :

var gyroEditor = angular.module('gyroEditor', []);

gyroEditor.controller('Ctrl', function($scope) {

  $scope.nodes = [
    { 
      title: 'Computers',
      categories: [
        {
          title: 'Laptops',
          categories: [
            {
              title: 'Ultrabooks'
            },
            {
              title: 'Macbooks'            
            }
          ]
        },

        {
          title: 'Desktops'
        },

        {
          title: 'Tablets',
          categories: [
            { 
              title: 'Apple'
            },
            {
              title: 'Android'
            }
          ]        
        }
      ]
    },

    {
      title: 'Printers'
    }

  ];
});

gyroEditor.directive('tree', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {nodes: '=nodes'},
    templateUrl: 'tree.html',
    controller: function($scope) {
      console.log('tree ctrl');
    }
  };
});
gyroEditor.directive('treenode', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {node:'=node'},
    templateUrl: 'treenode.html',
    controller: function($scope) {
      console.log('node ctrl');
    }
  };
});
gyroEditor.directive("recursive", function($compile) {
  return {
    restrict: "EACM",
    priority: 100000,
    compile: function(tElement, tAttr) {
      var contents = tElement.contents().remove();
      var compiledContents;
      return function(scope, iElement, iAttr) {
        if(!compiledContents) {
          compiledContents = $compile(contents);
        }
        iElement.append(
          compiledContents(scope, 
                           function(clone) {
            return clone; }));
      };
    }
  };
});

.panel-left {
    float: left;
    width: 200px;
    margin: 0 20px 20px 0;
}

.panel-editors {
    float: right;
    height: 100%;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app=gyroEditor ng-controller=Ctrl>
    <script type="text/ng-template" id="treenode.html">
        <li ng-init="collapsed=true">
            <a ng-click="collapsed=!collapsed"><i class="fa fa-{{((collapsed || !node.categories) ? '' : '-open')}}"></i>     {{node.title}}</a>
            <ol ng-if="!collapsed && node.categories && node.categories.length">
                <recursive>
                    <treenode ng-repeat="c in node.categories" node=c>
                    </treenode>
                </recursive>
            </ol>
        </li>
    </script>
    
    <script type="text/ng-template" id="tree.html">
        <ol>
            <treenode ng-repeat="n in nodes" node=n></treenode>
        </ol>
    </script>
    
    <div class=panel-left>
        <tree nodes=nodes></tree>
    </div>
    
</div>