【问题标题】:Angular menu items with attached dropdowns doesn't display at all带有附加下拉菜单的角度菜单项根本不显示
【发布时间】:2014-11-12 14:21:35
【问题描述】:

我正在制作一个非常复杂的角度菜单(或稍后会制作),我已经完成了大部分的结构化工作,但我仍然坚持这一点。如您所见,我根据当前登录的人员为不同的人指定了不同的菜单选项。现在我只想显示“管理员”的菜单。我放了一个ng-if 来检查admin 属性,如果找到一个,它应该将其内容作为主要的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-if ???你有没有创建一个叫做那个的服装指令?因为据我所知没有data-ng-if。你的意思是使用 ng-if 吗?
  • @RiceJunkie data-ng-if 是一个指令,使其与 HTML5 兼容或其他。它和 ng-if 一样,它说他们网站上的某个地方不记得在哪里。

标签: javascript html angularjs nested


【解决方案1】:

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

【讨论】:

  • 使用ng-show="menu.admin"代替data-ng-if="menu.admin"
猜你喜欢
  • 1970-01-01
  • 2019-03-09
  • 2013-08-12
  • 1970-01-01
  • 2012-05-27
  • 2015-06-15
  • 1970-01-01
  • 2022-01-01
相关资源
最近更新 更多