Меню и подменю AngularJS от JSON с Twitter Bootstrap

Question

Я новичок в AngularJS. Я работаю над личным проектом, используя Twitter Bootstrap, чтобы я мог изучить AngularJS. У меня есть данные в файле JSON. Ссылки на название проекта и главного меню заполняются просто отлично. Под одним из этих ссылок есть подменю, и это то, что я не могу заполнить. Что я хотел бы сделать, это загрузить подменю с помощью ng-repeat. Поэтому в основном я имею дело с ng-repeat внутри ng-repeat. Любые советы приветствуются. Спасибо!

Мой контроллер выглядит следующим образом:

'use strict'; 

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

app.controller('NavCtrl', function($scope, $http) { 

$http.get('app/content/nav.json').success(function(data) { 

    $scope.nav = data; 
    $scope.links = data.links; 

    }); 

}); 

Мой JSON:

{ 
"projectTitle" : "My Website Title", 
"links" : [ 
    {"name" : "Home", "url" : "/", "className" : ""}, 
    {"name" : "About", "url" : "/about", "className" : ""}, 
    {"name" : "Contact", "url" : "/contact", "className" : ""}, 
    {"name" : "Categories", "url" : "/categories", "className" : "dropdown", "sub" : 
     [ 
      {"name" : "Tech Stuff", "url" : "/techStuff"}, 
      {"name" : "AngularJS", "url" : "/angularJS"}, 
      {"name" : "HTML5", "url" : "/html5"}, 
      {"name" : "Javascript", "url" : "/javascript"}, 
      {"name" : "jQuery", "url" : "/jquery"} 
     ] 
    } 
] 
} 

Мой HTML:

<div ng-controller="NavCtrl" class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">{{nav.projectTitle}}</a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
        <li ng-repeat="link in links" class="{{link.className}}"> 
         <a href="{{link.url}}" class="{{link.sub && 'dropdown-toggle' || ''}}" data-toggle="{{link.sub && 'dropdown' || ''}}">{{link.name}} 
          <b ng-show="link.sub" class="caret"></b> 
         </a> 
         <ul class="dropdown-menu" ng-show="link.sub"> 
          <li ng-repeat="sub in links"> 
           <a href="">{{sub.name}}</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Изменить данные вложенного меню заполнить шаблон

<li ng-repeat="subItem in link.sub"> 
    <a href="{{subItem.url}}">{{subItem.name}}</a> 
</li> 

link.sub - это подкатегория текущего объекта данных, а затем цикл через каждый элемент подкатегорий.

Demo on jsFiddle