2014-11-11 3 views
0

꽤 복잡한 (또는 나중에있을 예정인) 각도 메뉴를 만들고 있습니다. 대부분 구조화를 수행했지만이 중 하나에 붙어 있습니다. 맡은 일. 보시다시피 현재 로그인 한 사용자에 따라 다른 메뉴 옵션을 지정했습니다. 지금은 "admin"메뉴를 표시하고 싶습니다. admin 속성을 확인하는 ng-if을 넣었습니다. 찾으면 드롭 다운 목록 항목이 포함 된 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' 
     } 
    ] 
}); 
+0

data-ng-if ??? 너는 그걸로 의상 지시를 만들었 니? 왜냐하면 내가 아는 한 데이터가 없다는 것입니다. ng-if를 사용하셨습니까? –

+0

@RiceJunkie data-ng-if는 HTML5와 호환되도록 만드는 지시어입니다. 그것은 ng-if와 동일하지만, 웹 사이트의 어딘가에서 어디서 기억이 나지 않는다고 말합니다. – Chrillewoodz

답변

1

사용이, ng-show=menu.admin. 그러나 요소가 표시/숨기기 권한을 확인하기 위해 할당 방법이 아닌 메서드를 사용하는 것이 좋습니다. 메서드는 각도가 값을 결정할 때까지 대기하지만 변수는 요소를 표시/숨기기 위해 현재 상태를 고려하기 때문에 기다리는 것이 좋습니다.

+0

어디에서 ng-show를 할 수 있습니까? – Chrillewoodz

+0

'data-ng-if = "menu.admin"대신에'ng-show = "menu.admin"'을 사용하십시오. – Aviro

관련 문제