Question

我正在使用角度中的ng-repeat创建动态菜单在使用ng-repeat（带有静态内容）之前我的静态代码如下所示（完全正常。当我们点击蜜月套餐时，它打开带有选项的子菜单）

<nav class="cd-nav">
    <ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
        <li class="has-children">
            <a href="#">Honeymoon Packages</a>

            <ul class="cd-secondary-nav is-hidden">
                <li class="go-back"><a href="#0">Menu</a></li>

                <li class="has-children">
                    <a href="#">Domestic Tour</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Domestic Tour</a></li>
                        <li class="see-all"><a href="#">All Accessories</a></li>
                        <li><a href="#">Goa </a></li>
                        <li><a href="#">Shimla</a></li>
                        <li><a href="#">Jammu & Kashmir</a></li>
                        <li><a href="#">Himachal</a></li>
                        <li><a href="#">Malvan</a></li>
                        <li><a href="#">Bangal</a></li>
                    </ul>
                </li>

                <li class="has-children">
                    <a href="#">Bottoms</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="#">All Bottoms</a></li>
                        <li><a href="#">Casual Trousers</a></li>

                        <li><a href="#0">Leggings</a></li>
                        <li><a href="#0">Shorts</a></li>
                    </ul>
                </li>


            </ul>
        </li>

    </ul>
</nav>

使用ng-repeat后，代码如下

<nav class="cd-nav">
    <ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
        <li class="has-children" ng-repeat="category in listCategory">
            <a href="#" id="mainCat" target="_self">{{category.Name}}</a>


            <ul class="cd-secondary-nav is-hidden">
                <li class="go-back"><a href="#0">Menu</a></li>

                <li class="has-children">
                    <a href="#">Domestic Tour</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Domestic Tour</a></li>
                        <li class="see-all"><a href="#">All Accessories</a></li>
                        <li><a href="#">Goa </a></li>
                        <li><a href="#">Shimla</a></li>
                        <li><a href="#">Jammu & Kashmir</a></li>
                        <li><a href="#">Himachal</a></li>
                        <li><a href="#">Malvan</a></li>
                        <li><a href="#">Bangal</a></li>
                    </ul>
                </li>

                <li class="has-children">
                    <a href="#">Bottoms</a>

                    <ul class="is-hidden">
                        <li class="go-back"><a href="#0">Clothing</a></li>
                        <li class="see-all"><a href="#">All Bottoms</a></li>
                        <li><a href="#">Casual Trousers</a></li>

                        <li><a href="#0">Leggings</a></li>
                        <li><a href="#0">Shorts</a></li>
                    </ul>
                </li>


            </ul>
        </li>


    </ul>
</nav>

- [没有ng-repeat]

- [使用ng-repeat无法点击并打开子菜单]

但使用ng-repeat绑定动态数据后，子列表菜单没有显示，有人可以告诉我我做错了什么吗？

Answer 1

因为我能够看到你给了id =＆＃34; mainCat＆＃34;到你的主菜单，我想你知道id在视图中是唯一的。所以它根本不会点击。请尝试为所有标签提供唯一ID。您可以使用$ index来执行此操作。

   id="mainCat{{$index}}"

它将创建一个唯一的ID。希望这可能有所帮助。

ng-repeat导致菜单不起作用

1 个答案: