JSFiddle - React, Tailwind, and code Playground

by Dave Alperovich

HTML

<div ng-controller="MyCtrl">
          <button class="addQuestionButton btn btn-primary" ng-click="AddRootQuestion(questions)">Add node</button>
        <div ng-repeat="question in questions" ng-include="question">     </div>
    
    <script type="text/ng-template" id="question">
        <div ng-controller="QuestionController" ng-class="{active : isSelected(question)}">
          <button class="btn btn-primary" ng-click="AddSubQuestion(question)">Add node</button>
          <button class="btn btn-primary" ng-click = "editQuestion(question)">Edit Question</button>
        </div>
        <div ng-repeat="question in question.nodes" ng-include="question">
        </div>                      
</script>
</div>

CSS

.active {
    background-color: orange;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.questions = [];  
        $scope.AddRootQuestion = function(questions) {
            questions.push({name: 'Question', nodes: []});
        };
}

function QuestionController($scope) {
    $scope.choices = [];
    $scope.choice = {text: ''};

    $scope.AddSubQuestion = function(question, $element) {
      var newName = 'Name of question goes here';
      question.nodes.push({name: newName, id: 'it goes in here', nodes: []});
    };

    $scope.editQuestion = function(question){
      $scope.selected = question;
    };

    $scope.isSelected = function(question) {
      return $scope.selected === question;
    };
}