如何使用材质角度在导航栏上执行下拉项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用材质角度在导航栏上执行下拉项相关的知识，希望对你有一定的参考价值。
我正在使用Angularjs和google的Material Angular库qazxsw poi
他们在他们的网站上的导航栏中有下拉项目，但我找不到任何对象或示例来制作我自己的。
我怎样才能做到这一点？
谢谢！
您可以在下面的代码中使用Angular Material Side Menu
标记
https://material.angularjs.org/
<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
如果有其他人登陆，那么值得一提的是，在Angular ngHide和ngShow指令的帮助下，这可以很容易地完成。任何装饰，如图标，样式，动画等都可以添加到它，但如果你这样做，功能是非常直接的：
这是一个单一菜单层的模板（切换项和子菜单项）
plunkr
以下是它可能是你将看到的最简单的控制器，尽管如果它在它自己的json文件中会更好;）
<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>
你可能会发现它工作.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/'
}, ];
})
看到！简单！没有必要疯狂，在编程中很容易。出售可维护性;）
一个简单的，我自己做了。使用Angular材质库
你可以这样做只使用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>
以上是关于如何使用材质角度在导航栏上执行下拉项的主要内容，如果未能解决你的问题，请参考以下文章