2
我使用Angularjs與Google的材質角庫https://material.angularjs.org/怎麼辦下拉項導航欄上用材料的角度
他們在他們的網站導航欄下拉的項目，但我找不到任何物體或示例做我自己的一個。
我該如何做到這一點？
謝謝！
A
回答
1
你可以使用下面的代碼角邊料菜單
標記
<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>
我可以給你的想法有關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';
});
+0
謝謝！真的有幫助:) – jyDev 2015-04-03 09:57:49
+0
@jyDev歡迎您..很高興幫助您:) – 2015-04-03 10:00:33
+0
這不是下拉菜單的確（我沒有downvote） – 2015-04-23 12:08:17
1
1
就在這種情況下，別人的土地，這將是值得的，要知道，這可相當容易地與角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
請參閱！簡單！沒有必要瘋狂，容易編程。爲了銷售的可維護性;）
0
一個簡單的，我自己做了這個。使用Angular材質庫
你可以只使用Md列表項和幾個指令，如ng-show，ng-class。
在這裏我跟蹤控制器中的活動菜單項。
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);
}
相關問題
- 1. 角度材料導航欄不工作
- 2. 角材料導航欄不呈現
- 3. 如何使用角材料2製作響應式導航欄？
- 4. 角度材料透明工具欄
- 5. 角材料工具欄高度問題
- 6. 角材料固定側導航
- 7. 角材料設計：建立與頂部導航欄和左sidenav
- 8. 設置抽屜式導航欄在角2 - 材料2
- 9. 角度材料，$ mdDialog
- 10. 導航欄上的導航欄下拉引導程序
- 11. 帶導軌的角度材料
- 12. 下拉導航欄
- 13. 下拉導航欄
- 14. 側導航中的角度材料滑動過渡？
- 15. 角材料MD-選擇下拉定位
- 16. 角材料卡工具欄
- 17. 在角度材料設計的工具欄下面設置sidenav？
- 18. 角下拉導航
- 19. 從bootstraps導航到有角度的頁面模板導航欄下拉
- 20. 如何隱藏角度2材質中的側面導航欄
- 21. 如何在角度材料中控制md-select下拉位置
- 22. 材料角度虛擬重複不顯示下拉值
- 23. 角度和角度材料[$ injector：modulerr]
- 24. 角度材料VS Materialisecss
- 25. Pinterest角度材料佈局
- 26. 材料和角度2
- 27. 錯誤：角度2材料
- 28. 導航欄上懸停下拉
- 29. 導航欄懸停下拉
- 30. 手機下拉導航欄
Follw此鏈接https://github.com/angular/material/blob/master/docs/README.md它可以幫助你在本地運行角度材料源代碼。它有助於祝你好運！ – Prasad 2015-07-02 10:17:10