具有附加下拉列表的角度菜单项根本不显示

时间:2014-11-11 21:01:35

标签: javascript html angularjs nested

我正在制作一个非常复杂的角度菜单(或者稍后会有),我已经完成了大部分结构,但我仍然坚持这一点。正如您所看到的,我根据当前登录的人员为不同的人指定了不同的菜单选项。现在我只想显示" admin"的菜单。我已经设置ng-if来检查admin属性,如果它找到一个,它应该将它作为主要项目循环出来,以及包含下拉列表的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'
        }
    ]
});

1 个答案:

答案 0 :(得分:1)

使用此ng-show=menu.admin。但是,建议使用方法而不仅仅是一个赋值来检查显示/隐藏元素的授权,因为该方法将等到Angular解析它的值,但变量只考虑它&#39;显示/隐藏元素的当前状态。