使用 json angular 应用动态菜单时不显示子菜单

Question

我正在使用 json 文件来显示我的 html 页面中的所有菜单。我已经在 json 文件中应用了正确过程的菜单。我正在使用 Angular 将这些菜单绑定到 html 页面。所有主菜单都显示在那里。但问题是当我点击子菜单箭头时，它显示为空白。也只有一个菜单项有关于我们菜单的子菜单，但它显示每个菜单项的计数器 1。查看它的外观的网址是dynamic menu using json angular

如何将这些子菜单仅应用于关于我们的菜单以及单击关于我们的菜单时如何显示子菜单？

我的html代码是

<nav id="menu" ng-app="demoApp" ng-controller="demoCtrl">
        <ul id="my-list">
            <li ng-repeat="menu in menus">
                <a href="{{menu.url}}">
                    {{menu.name}}
                </a>
                <ul ng-show="menu.sub.length!=0">
                    <li ng-repeat="subItem in menu.sub">
                        <a href="{{subItem.url}}">{{subItem.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

您可以在给定的 url 中找到其他来源。

Answer 1

Demo link working

在您的代码中，菜单脚本在您的角度之前加载，因此子数据未正确加载。 像这样更改您的代码。为您的脚本设置超时 更改在这里完成：-

                $(function() {
                    setTimeout(function(){
                    $("#menu").mmenu({
                        extensions  : ["widescreen"],
                        counters    : true,
                        navbars     : [{
                            content: ["searchfield"]
                        }, true]
                    }).on( 'click',
                        'a[href^="#/"]',
                        function() {
                            alert( "Thank you for clicking, but that's a demo link." );
                            return false;
                        }
                    );
                    var API = $("#menu").data( "mmenu" );
                    }, 3000);
                });