如果有超过1个子菜单,请将其下拉?

时间:2016-03-31 23:15:11

标签: javascript angularjs twitter-bootstrap drop-down-menu meanjs

我正在使用Mean JS开发一个项目,我正在使用他们在https://github.com/meanjs/mean提供的模板。 基本上我想做:

 if (more than 1 sub-menus)
         make it drop-down
    else 
       make just a button and if that button clicked take it to state of the sub menu.

导航栏上的按钮将被定义为下拉列表。它将有2个子菜单​​。所有类型的用户都可以看到此主按钮。但是,一般用户只能看到下拉列表中的1个子菜单。 管理员用户将显示所有2个子菜单​​。我想将其定义为下拉菜单,但如果只有 1子菜单,请不要将其显示为下拉列表。当用户点击主按钮时,它将把它带到子菜单中定义的页面。

以下是header.client.view.html中的代码(这是来自模板,我没有更改它。)

<nav class="collapse  navbar-collapse" collapse="!isCollapsed" role="navigation">
  <ul class="nav navbar-nav" ng-if="menu.shouldRender(authentication.user);">
    <li ng-repeat="item in menu.items | orderBy: 'position'" ng-if="item.shouldRender(authentication.user);" ng-switch="item.type" ng-class="{ active: $state.includes(item.state), dropdown: item.type === 'dropdown' }" class="{{item.class}}" dropdown="item.type === 'dropdown'">
      <a ng-switch-when="dropdown" class="dropdown-toggle" dropdown-toggle role="button">{{::item.title}}&nbsp;<span class="caret"></span></a>
      <ul ng-switch-when="dropdown" class="dropdown-menu">
        <li ng-repeat="subitem in item.items | orderBy: 'position'" ng-if="subitem.shouldRender(authentication.user);" ui-sref-active="active">
          <a ui-sref="{{subitem.state}}" ng-bind="subitem.title"></a>
        </li>
      </ul>
      <a ng-switch-default ui-sref="{{item.state}}" ng-bind="item.title"></a>
    </li>
  </ul>
</nav>

以下是articles.client.config.js

中的内容
// Configuring the Articles module
angular.module('articles').run(['Menus',
  function(Menus) {
    // Add the articles dropdown item
    Menus.addMenuItem('topbar', {
      title: 'Blog',
      state: 'articles',
      type: 'dropdown',
      roles: ['*'],
      position: 1
    });

    // Add the dropdown list item
    Menus.addSubMenuItem('topbar', 'articles', {
      title: 'Visit Blog',
      state: 'articles.list',
      roles: ['user', 'admin']
    });

    // Add the dropdown create item
    Menus.addSubMenuItem('topbar', 'articles', {
      title: 'Create Blog Post',
      state: 'articles.create',
      roles: ['admin']
    });
  }
]); 

0 个答案:

没有答案