JSFiddle - React, Tailwind, and code Playground

by yahyaKACEM

HTML

<div ng-app ng-controller="recursion">
  <script id="recurse" type="text/ng-template">
    <li ng-repeat="item in items"
        ng-class="{selected:item==data.selected,children:item.children,expanded:item.expanded}"
        ng-click="item.expanded=!item.expanded;data.selected=item;$event.stopPropagation()">
      {{item.name}}
      <ul ng-if="item.children"
          ng-include src="'recurse'"
          ng-init="items=item.children" ng-show="item.expanded"></ul>
      </li>
  </script>
  <ul ng-include src="'recurse'"></ul>
</div>

CSS

.children:after {
    content: '-->'
}
.children.expanded:before {
    content: '<--'
}
.children.expanded:after {
    content: ''
}
.selected { 
    color: green; 
}

JavaScript

function recursion($scope) {
    $scope.data = {};
    $scope.items = [
        {
            name: 'aFirst'
        }, {
            name: 'Second'
        }, {
            name: 'Third',
            children: [
                {name: 'Third.First',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Third',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Third',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Third',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Third',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Third',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Second'},
                {name: 'Third.Third',
            children: [
                {name: 'Third.First'},
                {name: 'Third.Second'},
                {name: 'Third.Third'}
            ]}
            ]}
            ]}
            ]}
            ]}
            ]}
            ]},
                {name: 'Third.Second'},
                {name: 'Third.Third'}
            ]
        }, {
            name: 'Fourth'
        },
    ];
}