【发布时间】:2014-11-12 14:21:35
【问题描述】:
我正在制作一个非常复杂的角度菜单(或稍后会制作),我已经完成了大部分的结构化工作,但我仍然坚持这一点。如您所见,我根据当前登录的人员为不同的人指定了不同的菜单选项。现在我只想显示“管理员”的菜单。我放了一个ng-if 来检查admin 属性,如果找到一个,它应该将其内容作为主要的li 项以及包含下拉列表项的ul 循环出来。然而,我完成它的方式显示了除admin 内容之外的所有内容。我已经尝试了几个小时的不同解决方案,但我就是做错了。我究竟做错了什么?
我为大量代码道歉,但有必要对我的结构有一个很好的了解。
<header>
<ul id="main-menu">
<li data-ng-repeat="menu in menus" id="{{menu.id}}"><a href="{{menu.URL}}.php">{{menu.title}}</a>
<ul data-ng-repeat="submenu in menu" data-ng-if="menu.admin"> <--if admin
<li data-ng-repeat="subitem in submenu.items"><a href="{{subitem.URL}}.php">{{subitem.title}}</a></li>
</ul>
</li>
</ul>
</header>
这是包含所有信息的我的控制器:
onlinePlatform.controller('onlinePlatformCtrl', function ($scope) {
$scope.menus = [
{
title: 'Startsida',
URL: 'home'
},
{
title: 'Nyheter',
URL: 'news'
},
{
title: 'Meddelanden',
items: [
{
title: 'Inkorg',
URL: 'inbox'
},
{
title: 'Skickade meddelanden',
URL: 'sentmsg'
},
{
title: 'Borttagna meddelanden',
URL: 'removedmsg'
}
],
URL: 'messages',
id: 'msg'
},
{
admin: {
title: 'Administration',
items: [
{
title: 'Hantera utbildningar',
URL: 'mngprograms'
},
{
title: 'Hantera kurser',
URL: 'mngcourses'
},
{
title: 'Hantera lärare',
URL: 'mngteachers'
},
{
title: 'Hantera studenter',
URL: 'mngstudents'
}
],
URL: 'administration',
id: 'administration'
},
teacher: {
title: 'Utbildning',
items: [
{
title: 'Kurser överblick',
URL: 'coursesoverview'
},
{
title: 'Sätt eller ändra betyg',
URL: 'editgrades'
},
{
title: 'Boka eller avboka lokaler',
URL: 'classroombooking'
}
],
URL: 'utbildning',
id: 'utbildning'
},
student: {
title: 'Mina sidor',
items: [
{
title: 'Mina kurser',
URL: 'mycourses'
},
{
title: 'Mitt schema',
URL: 'myschedule'
},
{
title: 'Mina betyg',
URL: 'mygrades'
},
{
title: 'Mina kontaktuppgifter',
URL: 'mycontactinfo'
},
{
title: 'Klasslista',
URL: 'classlist'
},
{
title: 'Anteckningar',
URL: 'notes'
}
],
URL: 'mypages',
id: 'mypages'
}
},
{
title: 'Forum',
URL: 'forum'
},
{
title: 'Kalender',
URL: 'calendar'
},
{
admin: {
title: 'Enkäter',
items: [
{
title: 'Skapa enkät',
URL: 'createsurvey'
},
{
title: 'Visa tidigare enkäter',
URL: 'previussurveys'
}
],
URL: 'surveys',
id: 'surveys'
},
teacher: {
title: 'Kontaktuppgifter',
items: [
{
title: 'Profil',
URL: 'profile'
},
{
title: 'Redigera kontaktuppgifter',
URL: 'editcontactinfo'
}
],
URL: 'contactinfo',
id: 'contactinfo'
},
student: {
title: 'Verktyg',
items: [
{
title: 'Ladda ner Dreamspark produkter',
URL: 'dreamspark'
}
],
URL: 'tools',
id: 'tools'
}
},
{
title: 'Hjälp',
items: [
{
title: 'Vanliga frågor',
URL: 'faq'
},
{
title: 'JENSEN kontaktuppgifter',
URL: 'contactinfo'
}
],
URL: 'help',
id: 'help'
}
]
});
【问题讨论】:
-
数据-ng-if ???你有没有创建一个叫做那个的服装指令?因为据我所知没有data-ng-if。你的意思是使用 ng-if 吗?
-
@RiceJunkie data-ng-if 是一个指令,使其与 HTML5 兼容或其他。它和 ng-if 一样,它说他们网站上的某个地方不记得在哪里。
标签: javascript html angularjs nested