Dynamic menu using AngularJS and JSON

Question

I am trying to create a dynamic menu in Angularjs using below JSON.

[{
  "Name": "Lesson 1",
  "path": "course/1.html",
  "topic": [{
    "Name": "Topic 1",
    "path": "course/2.html",
    "subtopic": []
  }, {
    "Name": "Topic 2",
    "path": "course/1.html",
    "subtopic": [{
      "Name": "SubTopic 21",
      "path": "course/2.html"
    }, {
      "Name": "SubTopic 22",
      "path": "course/1.html"
    }, {
      "Name": "SubTopic 23",
      "path": "course/2.html"
    }, {
      "Name": "SubTopic 24",
      "path": "course/1.html"
    }]
  }]
}, {
  "Name": "Lesson 2",
  "path": "course/1.html",
  "topic": [{
    "Name": "Topic 1",
    "path": "course/2.html",
    "subtopic": []
  }, {
    "Name": "Topic 2",
    "path": "course/1.html",
    "subtopic": [{
      "Name": "SubTopic 21",
      "path": "course/2.html"
    }, {
      "Name": "SubTopic 22",
      "path": "course/1.html"
    }]
  }]
}]

I have Lesson, Topic(Sub Menu) and Subtopic(Super sub menu). Submenu should get visible once the user clicks on related $index main menu. Please help.

MY WORK

<ul class="absolutes">
    <li ng-click="alert($index)" ng-repeat="x in lessonArray" ng-show="myVar" >
        <ul style="margin-top: 2px; cursor: pointer;" > {{x.Name}}
            <li ng-click="alert3($index)" ng-repeat="topic in x.topic" class="myClasss" " ng-show="myVar2" > 
{{topic.Name}}
                <ul>
                    <li ng-repeat="subtopic in topic.subtopic" class="myClasss" " ng-show="myVar3">{{subtopic.Name}}</li> 
                </ul>
            </li> 
        </ul> 
    </li> 
</ul>

Who is upvoting this anyway?! There is zero own effort in this question! — indexoutofbounds
– indexoutofbounds, Commented Jun 19, 2017 at 7:52
<ul class="absolutes"> <li ng-click="alert($index)" ng-repeat="x in lessonArray" ng-show="myVar" > <ul style="margin-top: 2px; cursor: pointer;" > {{x.Name}} <li ng-click="alert3($index)" ng-repeat="topic in x.topic" class="myClasss" " ng-show="myVar2" > {{topic.Name}} <ul> <li ng-repeat="subtopic in topic.subtopic" class="myClasss" " ng-show="myVar3">{{subtopic.Name}}</li> </ul> </li> </ul> </li> </ul> — Padduboy
– Padduboy, Commented Jun 19, 2017 at 7:54
@Padduboy you better post this code into your question not the comments! — indexoutofbounds
– indexoutofbounds, Commented Jun 19, 2017 at 7:55

Slava Utesinov · Accepted Answer · 2017-06-19 13:28:25Z

angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
    $scope.menus = [{
      "Name": "Lesson 1",
      "path": "course/1.html",
      "topic": [{
        "Name": "Topic 1",
        "path": "course/2.html",
        "subtopic": []
      }, {
        "Name": "Topic 2",
        "path": "course/1.html",
        "subtopic": [{
          "Name": "SubTopic 21",
          "path": "course/2.html"
        }, {
          "Name": "SubTopic 22",
          "path": "course/1.html"
        }, {
          "Name": "SubTopic 23",
          "path": "course/2.html"
        }, {
          "Name": "SubTopic 24",
          "path": "course/1.html"
        }]
      }]
    }, {
      "Name": "Lesson 2",
      "path": "course/1.html",
      "topic": [{
        "Name": "Topic 1",
        "path": "course/2.html",
        "subtopic": []
      }, {
        "Name": "Topic 2",
        "path": "course/1.html",
        "subtopic": [{
          "Name": "SubTopic 21",
          "path": "course/2.html"
        }, {
          "Name": "SubTopic 22",
          "path": "course/1.html"
        }]
      }]
    }]
}]);

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="MyController">
 <ul>
   <li ng-repeat='menu1 in menus' ng-click='show1=!show1' ng-style='{cursor:menu1.topic.length>0?"pointer":"default"}'>
     {{menu1.Name}}
     <ul ng-if='show1'>
       <li ng-repeat='menu2 in menu1.topic' ng-click='show2=!show2;$event.stopPropagation();' ng-style='{cursor:menu2.subtopic.length>0?"pointer":"default"}'>
         {{menu2.Name}}
         <ul ng-if='show2' ng-click='$event.stopPropagation();' style='cursor:default'>
           <li ng-repeat='menu3 in menu2.subtopic'>
             {{menu3.Name}}
           </li>
         </ul>    
       </li>
     </ul>    
   </li>
 </ul>
</div>

Collectives™ on Stack Overflow

Dynamic menu using AngularJS and JSON

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related