使用AngularJS和JSON的动态菜单

Question

我想在下面的JSON中使用Angularjs创建一个动态菜单。

[{ 
    "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" 
    }] 
    }] 
}] 

我有课程，主题（子菜单）和副主题（超级子菜单）。 一旦用户点击相关的$index主菜单，子菜单应该可见。请帮忙。

我的工作

<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> 

Answer 1

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>