Ссылка на любую страницу через раскрывающееся меню в Angular JS

Question

У меня есть выпадающее меню, созданное в Angular JS, но у меня возникла проблема со ссылкой на меню внутри страницы.

Основная проблема заключается в том, чтобы узнать, в каком родительском меню мы находимся, а затем обращаясь к соответствующему подменю.

Мой HTML является:

<div id="menu"> 
      <ul> 
       <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"> 
        <a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a> 
        <ul> 
         <li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list"> 
          <a href="" ng-click="goToPage(2)">{{data.subMenu[$parent.$index].list[$index].heading}}</a> 

         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

И мой JS Кодекс:

function getPresentationData(){ 

    var data = {}; 

    data.title = 'My Site Title'; 

    data.pages = []; 
    data.subMenu = []; 



    data.subMenu[0] = {};  
    data.subMenu[0].list = []; 
    data.subMenu[0].list[0] = {heading:'Profile', number: '1'}; 
    data.subMenu[0].list[1] = {heading:'Background', number: '2'}; 
    data.subMenu[0].list[2] = {heading:'What is KAM', number: '3'}; 

    data.pages[0] = {}; 
    data.pages[0].menuTitle = 'Introduction'; 
    data.pages[0].slides = []; 
    data.pages[0].slides[0] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/3.jpg', video:'content/videos/3.m4v'}; 
    data.pages[0].slides[1] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/4.jpg', video:'content/videos/3.m4v'}; 
    ... 


    data.subMenu[1] = {};  
    data.subMenu[1].list = []; 
    data.subMenu[1].list[0] = {heading:'2 Profile', number: '1'}; 
    data.subMenu[1].list[1] = {heading:'2 Background', number: '2'}; 
    data.subMenu[1].list[2] = {heading:'2 What is KAM', number: '3'}; 

    data.pages[1] = {}; 
    data.pages[1].menuTitle = 'Cases'; 
    data.pages[1].slides = []; 
    data.pages[1].slides[0] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/3.jpg', video:'content/videos/3.m4v'}; 
    data.pages[1].slides[1] = {heading:'profile', speaker: 'Me', title:'Expert ', img:'content/4.jpg', video:'content/videos/3.m4v'}; 
    ... 


    data.pages[2] = {}; 
    data.pages[2].menuTitle = 'Valdsff ns'; 
    data.pages[2].slides = []; 
    data.pages[2].slides[0] = {heading:'asdf asdf asdfles', speaker: 'asdf asdfas', title:'Expert ', img:'casdf.jpg', video:'content/df3.m4v'}; 

    return data; 
} 

function presentationController($scope, $location){ 

    $scope.data = getPresentationData(); 

    $scope.currPage = 0; 
    $scope.currSlide = 0; 
    $scope.currMenu = 0; 

    $scope.goToPage = function(pageIndex){ 
     $('.slide-container').hide(); 
     $scope.currSlide = 0; 
     $scope.currPage = pageIndex; 
     $('.slide-container').fadeIn(500); 
    }; 
} 

Answer 1

решаемые его.

Измененное меню следующим образом: -

<div id="menu"> 
      <ul> 
       <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"> 
        <a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a> 
        <ul> 
         <li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list"> 
          <a href="" ng-click="goToSpecificPage([$parent.$index], [smenu.number])">{{data.subMenu[$parent.$index].list[$index].heading}}</a> 

         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

и добавили эту функцию: -

$scope.goToSpecificPage = function(pageIndex, slideIndex){ 

     $('.slide-container').hide(); 
     $scope.currSlide = slideIndex; 
     $scope.currPage = pageIndex; 
     $('.slide-container').fadeIn(500); 
    };