0

我在 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);
    };
}
4

1 回答 1

0

解决了。

更改菜单如下：-

<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);
    };
于 2013-05-29T22:37:50.193 回答