1

我有一个用 AngularJS 创建的应用程序，它有一条菜单。我想做的是为每个菜单创建子菜单。<ul> <li> ... </li> </ul>可以通过在我现有的菜单列表项下添加其他内容来创建子菜单。我该怎么做？

这是我的 AngularJS 调用代码：

<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> {{page.subMenu}}
        </li>
    </ul>
</div>

这会在 HTML 中生成以下代码，其中 div 为id=menu：

    <ul>
       <li class="ng-scope ng-binding selected" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
            <a class="ng-binding" href="" ng-click="goToPage($index)">Introduction</a> 
       </li>
       <li class="ng-scope ng-binding" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
            <a class="ng-binding" href="" ng-click="goToPage($index)">Cases</a> 
        </li>
        ...
        ...
    </ul>

AngularJS JS 代码

补充 HTML 之上的 Angular JS 代码是：

data.title = 'Amanpour consult Petrochemicals & Energy';
data.pages = [];

data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';

data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'A Heading: profile', speaker: 'The man himself', title:'Expert in awesomeness', img:'showing-awesomeness.jpg', video:'witnessing-awesomeness.m4v'};

 ....
 data.pages[0].slides[1] 
  ....
 data.pages[0].slides[2]
  ....
 data.pages[0].slides[3]

现在要添加子菜单，我想我可以跟随 AngularJS 代码：

data.pages[0].subMenu = '<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>';

然后像这样在 HTML 中调用它（注意{{page.subMenu}}）：

<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
    <a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a> **{{page.subMenu}}**
</li>

但它不起作用，它给我的只是以下内容，它只是在页面上逐字打印 HTML：

&lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;First Link&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Second Link&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt;

更新

我必须像这样在 JS 中创建一个菜单：

   data.subMenu = [];



    data.subMenu[0] = {};    
    data.subMenu[0].list = [];
    data.subMenu[0].list[0] = 'Menu 1';
    data.subMenu[0].list[1] = 'Menu 2';
    data.subMenu[0].list[2] = 'Menu 3';

并且必须像这样在我的 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-repeat="smenu in data.subMenu">
                            <a href="" ng-click="goToPage($index)">{{smenu.list[smenu]}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

唯一的问题是我必须正确循环；我无法正确地在循环内创建索引。

4

1 回答 1

0

我不太确定这是否是你要找的，但看看这个 jsfiddle：http: //jsfiddle.net/Marabyte/dxBe8/

在 HTML 中，您有两个导航的结构，主导航、子导航和各自的 ul/li

<section ng-app ng-controller="navCtrl">
    <nav class="main">
        <ul class="ul-nav">
            <li class="li-nav li-main" ng-click="select($index)" ng-repeat="list in lists">{{list.name}}</li>
        </ul>
    </nav>
    <nav class="sub" ng-show="subMenuShow">
        <ul class="ul-nav ul-sec">
            <li class="li-nav li-main" ng-repeat="sublist in sublists">{{sublist}}</li>
        </ul>
    </nav>
</section>

在您的控制器中，您有 2 个用于主导航和子导航的列表。

function navCtrl($scope) {
    $scope.lists = [{
        name: "Cinema"
    }, {
        name: "TV Shows"
    }, {
        name: "Music"
    }, {
        name: "Awards"
    }];
    $scope.subMenu = [
        ["Snatch", "Rockrolla"],
        ["Sherlock", "Game of Thrones"],
        ["The National", "Johnny Cash", "Xutos & Pontapés"],
        ["Oscars", "Golden Globes", "Emmys", "BAFTA"]
    ];
    $scope.select = function ($index) {
        $scope.sublists = $scope.subMenu[$index];
        $scope.subMenuShow = true;
    };
}

select() 函数根据主列表的索引显示子菜单。

希望能帮助到你！

雨果

于 2014-01-15T18:18:58.333 回答