sat*_*sat 8 html javascript css json angularjs
我对角度很新,无法找到一个解决方案来访问我的角应用程序中的子菜单项.我可以访问顶级菜单项,但是如何获得二级项目则丢失了
以下是我目前的代码
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
}
]
}
加上另一个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>