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

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

本文关键字:菜单项 显示 下拉列表      更新时间:2023-09-26

我正在制作一个非常复杂的角度菜单(或者稍后会(,我已经完成了大部分结构,但我坚持做一件事。如您所见,我根据当前登录的人为不同的人指定了不同的菜单选项。现在我只想显示"管理员"的菜单。我放了一个检查admin属性的ng-if,如果找到一个,它应该将其内容循环为主要 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-show=menu.admin .但是,建议使用方法而不仅仅是赋值来检查显示/隐藏元素的授权,因为该方法将等到 Angular 解析其值,但变量仅考虑其当前状态以显示/隐藏元素。