Menu
I am quite new to angular and cannot find a solution to access the submenu items in my angular app. I can access the top level menu items but am lost as to how to get the second level items
below is my code so far
html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="list">
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="menu in menus" id="{{artist.id}}">
<a ng-href="{{menu.content}}">{{menu.description}}</a>
<ul>
<li ng-href="{{menu.content}}">{{menu.menu}}</li>
</ul>
</li>
</ul>
</div>
</html>
javascript
// Code goes here
angular.module('list', []);
function ListCtrl($scope, $http) {
$http({
method: 'GET',
url: 'menu.json'
}).success(function(data) {
$scope.menus = data.menus; // response data
angular.forEach(data.menus, function(menu, index) {
});
});
}
json
{
"menus":[
{
"id":"contact",
"leaf":true,
"description":"Contact Us",
"link":"",
"content":"contactUs.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"rules",
"leaf":false,
"description":"Sports Betting Rules",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"types",
"leaf":true,
"description":"Wager Types",
"link":"",
"content":"wagerTypes.html",
"cssClass":"static-content wager-types",
"menu":null
},
{
"id":"odds",
"leaf":true,
"description":"Odds & Lines",
"link":"",
"content":"oddsAndLines.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"policies",
"leaf":true,
"description":"Rules & Policies",
"link":"",
"content":"rulesAndPolicies.html",
"cssClass":"static-content rules-policies",
"menu":null
},
{
"id":"bonuses",
"leaf":true,
"description":"Sports Bonuses",
"link":"",
"content":"sportsBonuses.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"conditions",
"leaf":false,
"description":"Terms & Conditions",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"termsOfService",
"leaf":true,
"description":"Terms of Service",
"link":"",
"content":"termsOfService.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"privacy",
"leaf":true,
"description":"Privacy Policy",
"link":"",
"content":"privacy.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"view",
"leaf":true,
"description":"View in: Mobile | Full Site",
"link":"",
"content":"view.html",
"cssClass":"static-content",
"menu":null
}
]
}
355
add another ng-repeat
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="list">
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="menu in menus" id="{{artist.id}}">
<a ng-href="{{menu.content}}">{{menu.description}}</a>
<ul>
<li ng-href="{{submenu.content}}" ng-repeat="submenu in menu.menu">{{submenu.id}}</li>
</ul>
</li>
</ul>
</div>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
