使用AngularJS在我的HTML中添加子菜单?
我用AngularJS创建了一个应用程序,它有一条菜单。我试图做的是为每个菜单创建子菜单。可以通过添加额外的使用AngularJS在我的HTML中添加子菜单?,angularjs,Angularjs,我用AngularJS创建了一个应用程序,它有一条菜单。我试图做的是为每个菜单创建子菜单。可以通过添加额外的来创建子菜单在我现有的菜单项列表下。我怎么做 这是我的AngularJS调用代码: <div id="menu"> <ul> <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages"> <a href="" n
- 来创建子菜单
在我现有的菜单项列表下。我怎么做
这是我的AngularJS调用代码:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a> {{page.subMenu}}
</li>
</ul>
</div>
AngularJS代码
补充上述HTML的Angular JS代码是:
data.title = 'Amanpour consult Petrochemicals & Energy';
data.pages = [];
data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';
data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'A Heading: profile', speaker: 'The man himself', title:'Expert in awesomeness', img:'showing-awesomeness.jpg', video:'witnessing-awesomeness.m4v'};
....
data.pages[0].slides[1]
....
data.pages[0].slides[2]
....
data.pages[0].slides[3]
现在要添加子菜单,我想我可以按照AngularJS代码:
data.pages[0].subMenu = '<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>';
但它不起作用,它给我的只是以下内容,它只是在页面上逐字打印HTML:
<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>
使现代化
我必须在JS中创建一个菜单,如下所示:
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = 'Menu 1';
data.subMenu[0].list[1] = 'Menu 2';
data.subMenu[0].list[2] = 'Menu 3';
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a>
<ul>
<li ng-repeat="smenu in data.subMenu">
<a href="" ng-click="goToPage($index)">{{smenu.list[smenu]}}</a>
</li>
</ul>
</li>
</ul>
</div>
必须在我的HTML中这样调用它:
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = 'Menu 1';
data.subMenu[0].list[1] = 'Menu 2';
data.subMenu[0].list[2] = 'Menu 3';
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a href="" ng-click="goToPage($index)">{{page.menuTitle}}</a>
<ul>
<li ng-repeat="smenu in data.subMenu">
<a href="" ng-click="goToPage($index)">{{smenu.list[smenu]}}</a>
</li>
</ul>
</li>
</ul>
</div>
-
-
唯一的问题是我必须做正确的循环;我无法在循环中正确创建索引。我不太确定这是否是您要查找的内容,但请查看以下JSFIDLE: 在HTML中,您有两个导航的结构,主导航、子导航和相应的ul/li
<section ng-app ng-controller="navCtrl">
<nav class="main">
<ul class="ul-nav">
<li class="li-nav li-main" ng-click="select($index)" ng-repeat="list in lists">{{list.name}}</li>
</ul>
</nav>
<nav class="sub" ng-show="subMenuShow">
<ul class="ul-nav ul-sec">
<li class="li-nav li-main" ng-repeat="sublist in sublists">{{sublist}}</li>
</ul>
</nav>
</section>
函数的作用是根据主列表的索引显示子菜单
希望有帮助
雨果
function navCtrl($scope) {
$scope.lists = [{
name: "Cinema"
}, {
name: "TV Shows"
}, {
name: "Music"
}, {
name: "Awards"
}];
$scope.subMenu = [
["Snatch", "Rockrolla"],
["Sherlock", "Game of Thrones"],
["The National", "Johnny Cash", "Xutos & Pontapés"],
["Oscars", "Golden Globes", "Emmys", "BAFTA"]
];
$scope.select = function ($index) {
$scope.sublists = $scope.subMenu[$index];
$scope.subMenuShow = true;
};
}