2016-11-05 67 views
0

我是angularJs的新學員。 我想通過.json創建子菜單菜單。 一個動態菜單,我可以通過相同的.json添加菜單和子菜單。AngularJS指令菜單模板由子菜單json提供

<a href="#" ng-repeat="item in menuHeader">{{item.NAV.menu[x].subItens[x].nome}} </a> 

我認爲這是接取其他元件內部的元件,考慮到我可以具有多個子菜單和菜單的方法。 我試圖做一個For循環裏面,但它是一個.HTML模板...所以任何人都可以幫助我解決這個問題或以其他方式顯示我嗎?

這裏有一個演示:CLICK HERE!

非常感謝!

回答

0

試試這個,我希望它會工作,按您的期望

var app = angular.module('myApp', []); 
 

 
function Ctrl($scope) { 
 
    var data = [ 
 
    { 
 
     "NAV": { 
 
      "menu": [ 
 

 
       { 
 
        "id": 0, 
 
        "nome": "Menu 1", 
 
        "subItens": [ 
 
         { 
 
          "id": 0, 
 
          "nome": "SUB MENU 1" 
 
         }, 
 

 
         { 
 
          "id": 1, 
 
          "nome": "SUB MENU 2" 
 
         }, 
 

 
         { 
 
          "id": 2, 
 
          "nome": "SUB MENU 3" 
 
         } 
 
        ] 
 
       }, 
 

 
       { 
 
        "id": 1, 
 
        "nome": "Menu 2", 
 
        "subItens": [ 
 
         { 
 
          "id": 0, 
 
          "nome": "SUB MENU 1_2" 
 
         }, 
 

 
               { 
 
          "id": 1, 
 
          "nome": "SUB MENU 2_2" 
 
         } 
 
        ] 
 
       }, 
 
       
 
       { 
 
        "id": 2, 
 
        "nome": "Menu 3", 
 
        "subItens": [ 
 
         { 
 
          "id": 0, 
 
          "nome": "SUB MENU 1_3" 
 
         } 
 
        ] 
 
       } 
 

 
      ] 
 
     } 
 
    } 
 
]; 
 

 
    $scope.menuLinks = data[0].NAV.menu; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="Ctrl"> 
 
        <ul class="nav"> 
 
         <li ng-repeat="link in menuLinks"><a href="{{link.url}}" class="{{link.sub && 'dropdown-toggle' || ''}}" data-toggle="{{link.sub && 'dropdown' || ''}}">{{link.nome}} 
 
         </a> 
 
          <ul class="dropdown-menu" ng-show="link.subItens"> 
 
           <li ng-repeat="subItem in link.subItens"> <a href="#123">{{subItem.nome}}</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
</div>

0

解決了!

我只是改變這一行:

<a href="#" ng-click="changeSub($index)"> 

和條件:

ng-show="$index == currentID"> 

的$指數給我確切的本地陣列。 =)