нг-повтор вызывает меню не работает

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 = "mainCat" в главном меню, и я думаю, вы знаете, что id является уникальным в представлении.Так что это не будет щелкать вообще.Пожалуйста, попробуйте дать уникальный идентификатор для всех ваших вкладок.Вы можете использовать $ index для этого.

   id="mainCat{{$index}}"

создаст уникальный идентификатор.Надеюсь, что это может помочь.

Answer 2

проверьте, правильно ли привязан ваш listCategory в контроллере.

Я добавил решение для codepen

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    
     $scope.listCategory = [
        {"Name" : "Honeymoon Packages" },
        {"Name" : "Honeymoon Packages2"},
        {"Name" : "Honeymoon Packages3"},
        {"Name" : "Honeymoon Packages4"},
        {"Name" : "Honeymoon Packages5"},
        {"Name" : "Honeymoon Packages6"},
        {"Name" : "Honeymoon Packages7"}
    ];
});

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <!---BOOTSRAP JS AND CSS-------->
  <script src="jquery-2.1.1.js" type="text/javascript"></script>
  <link href="bootstrap.min.css" rel="stylesheet" />
  <script src="bootstrap.min.js" type="text/javascript"></script>
<!-- added angularjs -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <!---MEGA MENU---->
  <link rel="stylesheet" href="mega-menu.css">
  <!-- Resource style -->
  <script src="modernizr.js"></script>
  <!-- Modernizr -->

  <!-----MEGA MENU SCRIPT------>
  <script src="jquery.mobile.custom.min.js"></script>
  <script src="main.js"></script>  
  <!-- added app.js -->
  <script src="app.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

  <!---Navigation---->
  <header class="cd-main-header">
    <a class="cd-logo" href="#0"><img src="images/logo.png" alt="Logo"></a>

    <ul class="cd-header-buttons">

      <li><a class="cd-nav-trigger" href="#cd-primary-nav"><span></span></a></li>
    </ul>
    <!-- cd-header-buttons -->
  </header>

 <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>
  <!-- cd-nav -->
  <main class="cd-main-content">
    <div class="clearfix"></div>
  </main>
</body>
</html>