javascript 如何使用材质角在导航栏上创建下拉项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29397130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do dropdown item on navbar with material angular
提问by jyDev
I'm using Angularjs with googles Material Angular library https://material.angularjs.org/
我将 Angularjs 与 googles 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!
谢谢！
采纳答案by Pankaj Parkar
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>
I could give you the idea about md-selectwhich 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';
});
回答by Carlos Galo Campos
"CREATING YOUR OWN ANGULAR MATERIAL NAVIGATION MENU"
“创建您自己的角度材料导航菜单”
I hope this blog might help you, please visit here
希望这篇博客对你有帮助，请访问这里
See working plunkr
见工作plunkr
回答by LOTUSMS
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. 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:
以防万一其他人遇到这种情况，知道在 Angular ngHide 和 ngShow 指令的帮助下可以很容易地做到这一点是值得的。可以向其中添加任何装饰，例如图标、样式、动画等，但如果您这样做，则功能非常简单：
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 ;)
看！简单！无需发疯，在编程中很容易。用于出售可维护性；)
回答by Moshiour Rahman
A Simple One, I made this on my own. using Angular material library
一个简单的，我自己做的。使用 Angular 材质库
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
<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);
}
