如何使用材质角度在导航栏上执行下拉项目

Question

I'm using Angularjs with googles Material Angular library https://material.angularjs.org/ 我正在将Angularjs与Google的Material Angular库一起使用https://material.angularjs.org/

They have drop down items in the navbar on their site, but I can't find any object or example to make one of my own. 他们在其网站的导航栏中添加了下拉菜单项，但我找不到自己创建的任何对象或示例。

How can I achieve this? 我该如何实现？

Thank you! 谢谢！

Answer 1

Angular Material Side Menu you could use below code Angular Material Side Menu您可以使用以下代码

Markup 标记

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" 
 md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

  <md-list>
  <md-item ng-repeat="item in menu">
    <a>
      <md-item-content md-ink-ripple layout="row" layout-align="start center" ng-click="$parent.navigate(item.icon)">
        <div class="inset">
           <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>
           <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>
        </div>

      </md-item-content>
       <md-divider></md-divider>
    </a>
  </md-item>
  <md-divider></md-divider>

  <md-item ng-repeat="item in admin">
    <a>
      <md-item-content md-ink-ripple layout="row" layout-align="start center">
        <div class="inset">
          <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
           <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>
        </div>

      </md-item-content>
    </a>
  </md-item>
</md-list>
</md-sidenav>

Plunkr Plunkr

I could give you the idea about md-select which will be act as drop-down. 我可以给你关于md-select的想法，它将用作下拉菜单。

Markup 标记

<body data-ng-controller="MainCtrl">
    <h1>md-select demo</h1>
    <md-select ng-model="widgetType" >
        <md-option ng-value="t.title" data-ng-repeat="t in widget">{{ t.title }}</md-option>
    </md-select>
</body>

Controller 调节器

var app = angular.module('DemoApp', ['ngMaterial']);

app.controller('MainCtrl', function($scope) {
  $scope.widget = [{
    "id": "line",
    "title": "Line"
  }, {
    "id": "spline",
    "title": "Smooth line"
  }, {
    "id": "area",
    "title": "Area"
  }, {
    "id": "areaspline",
    "title": "Smooth area"
  }];

  //init
  $scope.widgetType = 'Line';

});

Working Plunkr 工作朋克

Answer 2

"CREATING YOUR OWN ANGULAR MATERIAL NAVIGATION MENU" “创建自己的角材料导航菜单”

I hope this blog might help you, please visit here 希望此博客对您有所帮助，请访问此处

See working plunkr 看到工作的朋克

Answer 3

Just in case someone else lands in this, it would be worth it to know that this can be done rather easily with the help of Angular ngHide and ngShow directives. 以防万一其他人落入此漏洞，值得一提的是，借助Angular ngHide和ngShow指令可以很容易地做到这一点。 Any embellishments such as icons, styles, animations, etc can be added to it, yet the functionality is pretty straight forward if you do it this way: 可以向其中添加任何装饰，例如图标，样式，动画等，但是如果您这样做，则功能非常简单：

Here is your template for one single menu tier (toggle item and submenu items) 这是一个菜单层（切换项和子菜单项）的模板

<md-button ng-click="menuIsOpen = !menuIsOpen" layout="row"> Trigger</md-button>
<ul ng-init="menuIsOpen= false" ng-show="menuIsOpen">
    <md-menu-item ng-repeat="item in data">
        <md-button>
            <div layout="row" flex="">
                <a ui-sref="{{item.link}}" class="">
                    <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                </a>
            </div>
        </md-button>
    </md-menu-item>
</ul>

And here is what it could possibly be the most simple controller you'll ever see, although this would be better if it was in it's own json file ;) 这可能是您见过的最简单的控制器，尽管如果它在自己的json文件中会更好；）

.controller('ListBottomSheetCtrl', function($scope) {
    $scope.data = [{
        title: 'Home',
        icon: 'home',
        link: '/page1/'
    }, {
        title: 'Email us',
        icon: 'envelope',
        link: '/page2/'
    }, {
        title: 'Profile',
        icon: 'user',
        link: '/page3/'
    }, {
        title: 'Print',
        icon: 'print',
        link: '/page4/'
    }, ];

})

You may find it working here 您可能会发现它在这里工作

See! 看到！ Easy! 简单！ No need to go all crazy, easy does it in programming. 无需全力以赴，在编程中轻松实现。 For the sale of maintainability ;) 为了出售可维护性；）

Answer 4

A Simple One, I made this on my own. 一个简单的，我自己做的。 using Angular material library 使用角材料库

You Can Do it Just Using Md list item and Couple of directives, like ng-show, ng-class. 您可以使用Md列表项和指令对（例如ng-show，ng-class）来实现。

Here I am keeping track of active menu item in controller. 在这里，我跟踪控制器中的活动菜单项。

https://github.com/mtushar091/angularjs_sideMenu https://github.com/mtushar091/angularjs_sideMenu

Sidemenu.png Sidemenu.png

        <md-list ng-repeat="menu in menus" class="list_no_padding manu_container">

        <!-- MAIN MENU ITEMS -->
        <md-list-item  
            ng-click="parentMenuAction(menu)"
            class="menu_item"
            ng-class="{active: menu === activeMenu}">
                <md-icon md-svg-icon="res/icons/{{menu.icon}}"></md-icon>
                <p>{{menu.name}}</p>
                <span flex></span>
                <md-icon
                    md-svg-icon="res/icons/ic_keyboard_arrow_right_24px.svg"
                    ng-click="parentMenuAction(menu)"
                    ng-show="menu.items.length != 0"
                    class="nav_icon md-toggle-icon"
                    aria-hidden="true">
                </md-icon>
        </md-list-item>
        <!-- SUB MENU ITEMS -->
        <md-list-item 
            ng-repeat="item in menu.items"
            ng-click="chieldMenuAction(item)"
            ng-show="menu === activeMenu"
            class="sub_menu_item animate-show-hide"
            ng-class="{'sub_active': item === activeSubMenu}">
                <p>{{item.name}}</p>
        </md-list-item>

    </md-list>

// Init Default Active Item...
$scope.activeMenu = { };
$scope.activeSubMenu = { };

// Sidenav Toggle
$scope.toggle = function() { $mdSidenav('left').toggle(); };

 $scope.menus = [
    { 
        icon: "ic_apps_24px.svg",
        name: "Tables",
        state: "home.table",
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    {   icon: "ic_attach_file_24px.svg", name: "Reminders", items : [] },
    { 
        icon: "ic_archive_24px.svg",
        name: "Inspriation", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    { 
        icon: "ic_apps_24px.svg",
        name: "Notes", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    {   icon: "ic_attach_file_24px.svg", name: "Reminders", items : [] },
    { 
        icon: "ic_archive_24px.svg",
        name: "Inspriation", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    { 
        icon: "ic_battery_30_24px.svg",
        name: "Personal", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    { 
        icon: "ic_archive_24px.svg",
        name: "Inspriation", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    }
];


// MENU ITEM NAVIGATION ....................................
$scope.parentMenuAction = function(menu) {
    //Set as Active Menu or Remove as Active menu
    $scope.activeMenu = (menu === $scope.activeMenu) ? {} : menu;

    // Other Things to Do When Parent Manu is Clicked ...
    console.log('Active Menu ' + $scope.activeMenu.name);
    $state.go(menu.state);

};



// SUB MENU ITEM NAVIGATION ..............................
$scope.chieldMenuAction = function(item) {
    // Set As Active SubMenu Item
    $scope.activeSubMenu = item;

    console.log('Active SubMenu ' + $scope.activeSubMenu);
}

如何使用材质角度在导航栏上执行下拉项目

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-04-01 18:21:39

解决方案2
1 2016-07-06 01:51:08

解决方案3
1 2017-01-17 19:49:11

解决方案4
0 2018-03-02 04:36:23

如何使用材质角度在导航栏上执行下拉项目

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-04-01 18:21:39

解决方案2 1 2016-07-06 01:51:08

解决方案3 1 2017-01-17 19:49:11

解决方案4 0 2018-03-02 04:36:23

解决方案1
2 已采纳 2015-04-01 18:21:39

解决方案2
1 2016-07-06 01:51:08

解决方案3
1 2017-01-17 19:49:11

解决方案4
0 2018-03-02 04:36:23