Eu estou tentando criar um menu dinâmico no Angularjs usando abaixo 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"
}]
}]
}]
Eu tenho Lição, Tópico (Submenu) e Subtópico (Super submenu). O submenu deve ficar visível quando o usuário clicar em $index menu principal. Por favor ajude.
MEU TRABALHO
<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>
Respostas:
1 para resposta № 1angular.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>