javascript - 带有附加下拉菜单的 Angular 菜单项根本不显示

Question

我正在制作一个相当复杂的 Angular 菜单(或者稍后会)，我已经完成了大部分的结构，但我坚持这一件事。正如您所看到的，我根据当前登录的人员为不同的人指定了不同的菜单选项。现在我只想显示“管理员”的菜单。我放置了一个 ng-if 来检查 admin 属性，如果它找到一个，它应该将其内容作为主 li 项目以及包含下拉列表项。然而，我这样做的方式显示了除 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>

这是我的 Controller ，包含所有信息:

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

Answer 1

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