2016-12-08 85 views
0

我正在使用json文件來顯示我的html頁面中的所有菜單。我用正確的過程在json文件中應用了菜單。我正在使用angular來將這些菜單綁定到html頁面。所有主菜單都在那裏顯示。但問題是當我點擊子菜單箭頭時,它顯示爲空白。也只有一個菜單項具有關於我們菜單的子菜單,但是它向每個菜單項顯示計數器1。看看它是怎麼看的網址是dynamic menu using json angular當使用json角度應用動態菜單時子菜單不顯示

如何將這些子菜單應用到只有關於我們的菜單和如何顯示子菜單時點擊關於我們的菜單?

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

休息。

+0

爲什麼'menus.sub'和'menu.sub'?做'對象'菜單和'菜單'都有'sub'屬性? – Alee

+0

我編輯過的東西只有menu.sub。 –

回答

1

Demo link working

Menu
Submenu

在你的代碼,這樣子的數據不正確加載菜單腳本之前,你的角度加載。 像這樣改變你的代碼。爲您的腳本設置超時時間 此處所做的更改如下: -

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

感謝隊友,你的回答是完美的。 –

+0

但家裏沒有子菜單,那麼爲什麼這就像我們一樣。 –

+0

好的,我發現了。我必須使用ng-if而不是ng-show屬性。 –