javascript - Angular menu items with attached dropdowns doesn't display at all -

javascript - Angular menu items with attached dropdowns doesn't display at all -

i'm making angular menu pretty complex (or later on), i've done of structuring i'm stuck on 1 thing. can see have specified different menu options different people depending on who's logged in. right want show menu "admin". i've set ng-if checks admin property, if find 1 should loop out it's contents main li item along ul containing dropdown list items. way i've done it shows excepts admin content.. i've been trying different solutions hours can't right. doing wrong?

i apologize lot of code it's necessary overview of construction have.

<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>

this controller containing information:

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' } ] });

use this, ng-show=menu.admin. however, it's advised utilize method rather assignment check authorization show/hide elements, method wait until angular resolves it's value variable consider it's current status show/hide element.

javascript html angularjs nested