javascript 带有 Twitter Bootstrap 的 JSON 的 AngularJS 菜单和子菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18038926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Menu and Submenu by JSON with Twitter Bootstrap
提问by iChido
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!
我是 AngularJS 的新手。我正在使用 Twitter Bootstrap 进行个人项目，以便我可以学习 AngularJS。我的数据在一个 JSON 文件中。项目标题和主菜单链接被填充得很好。在这些链接之一下有一个子菜单，这是我无法填充的。我想做的是使用 ng-repeat 加载子菜单。所以基本上我正在处理 ng-repeat 中的 ng-repeat。欢迎任何和所有提示。谢谢！
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:
我的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:
我的 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>
回答by zs2020
Change the sub menu data populate template to
将子菜单数据填充模板更改为
<li ng-repeat="subItem in link.sub">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
link.subis the sub collection of the current data object, and then loop through each item of the sub collections.
link.sub是当前数据对象的子集合，然后循环遍历子集合的每一项。
