AngularJS Menu and Submenu by JSON with Twitter Bootstrap

Question

I am new to AngularJS. I am working on a personal project using Twitter Bootstrap so I can learn AngularJS. I have my data in a JSON file. The project-title and main menu links are being populated just fine. There is a submenu under one of those links and that's what I cannot get to populate. What I would like to do is to load the submenu using an ng-repeat. So basically I'm dealing with an ng-repeat inside of an ng-repeat. Any and all tips welcomed. Thanks!

My controller looks like this:

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

    });

});

My 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"}
        ]
    }
]
}

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

zs2020 · Accepted Answer · 2013-08-04 03:38:53Z

4

Change the sub menu data populate template to

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

link.sub is the sub collection of the current data object, and then loop through each item of the sub collections.

Demo on jsFiddle

answered Aug 4, 2013 at 3:38

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

2 Comments

Constantin Over a year ago

how to hide <ul class="dropdown-menu" ng-show="link.sub"> if i dont have for that menu any subcollections ?

Tropicalista Over a year ago

Try something like this: ng-class="{'dropdown-menu': w.submenu && w.submenu.length}"

Collectives™ on Stack Overflow

AngularJS Menu and Submenu by JSON with Twitter Bootstrap

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