javascript - How to do dropdown item on navbar with material angular -
i'm using angularjs googles material angular library https://material.angularjs.org/
they have drop down items in navbar on site, can't find object or example make 1 of own.
how can achieve this?
thank you!
angular material side menu use below code
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 give idea md-select act drop-down.
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'; }); 
Comments
Post a Comment