JSFiddle - React, Tailwind, and code Playground

by maxisam

HTML

<div ng-app ng-controller="recursion">
  <script id="recurse" type="text/ng-template">
    <li ng-repeat="item in items"
        ng-class="{children:item.children,expanded:item.expanded}"
        ng-click="item.expanded=!item.expanded;$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:before {
    content: '+'
}
.children.expanded:before {
    content: '-'
}

JavaScript

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