Submenu is not showing when applying dynamic menu using json angular

Question

I am using a json file to show all the menus in my html page. I have applied menus in json file with right process. I am using angular to bind these menus to html page. All the main menus are displaying there. But the issue is when i click on submenu arrow, it is showing blank. Also only one menu item has submenu that is about us menu, but it is showing counter 1 to each menu item. The url to see how it is looking is dynamic menu using json angular

How to apply those submenu to only about us menu and how to display submenus when clicked on about us menu ?

my html code is

<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>

Rest of the source you can find in given url.

why menus.sub and menu.sub? do both objects menus and menu have sub property? — Alee
– Alee, Commented Dec 8, 2016 at 8:17

Suresh B · Accepted Answer · 2016-12-08 10:29:43Z

1

Demo link working

In your code the menu script loaded before your angular so the sub data not loaded properly. change your code like this. set timeout for your script Changes done Here:-

                $(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);
                });

edited Dec 8, 2016 at 10:29

answered Dec 8, 2016 at 9:53

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Upendra Sharma Over a year ago

but home has no submenus then why is this going like about us.

Upendra Sharma Over a year ago

Ok i have found that. I have to use ng-if instead of ng-show property.

Collectives™ on Stack Overflow

Submenu is not showing when applying dynamic menu using json angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related