如何使用 material angular 在导航栏上做下拉项目

Question

我正在使用 Angularjs 和 googles Material Angular 库 https://material.angularjs.org/

他们在他们网站的导航栏中有下拉项目，但我找不到任何对象或示例来制作我自己的项目。

我怎样才能做到这一点？

谢谢！

Answer 1

Angular Material 您可以使用以下代码的侧边菜单

标记

<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

我可以给你关于 md-select 的想法，它将作为下拉菜单。

标记

<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>

控制器

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"

希望这篇博客对你有所帮助，please visit here

查看工作plunkr

Answer 3

以防万一其他人遇到这种情况，值得一提的是，借助 Angular ngHide 和 ngShow 指令可以相当轻松地完成此操作。任何装饰，如图标、样式、动画等都可以添加到它，但是如果你这样做，功能是非常简单的：

这是一个菜单层（切换项和子菜单项）的模板

<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>

这可能是您见过的最简单的控制器，尽管如果它在自己的 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/'
    }, ];

})

您可能会发现它有效 here

看！简单！无需发疯，在编程中很容易做到。出售可维护性 ;)

Answer 4

一个简单的，我自己做的。使用 Angular material 库

您只需使用 Md 列表项和几个指令即可完成，例如 ng-show、ng-class。

我在这里跟踪控制器中的活动菜单项。

https://github.com/mtushar091/angularjs_sideMenu

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

如何使用 material angular 在导航栏上做下拉项目

How to do dropdown item on navbar with material angular

javascript

css

angularjs

navbar

angular-material