jyDev jyDev - 5 months ago 55
Javascript Question

How to do dropdown item on navbar with material angular

I'm using Angularjs with googles Material Angular library 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!

Answer

Angular Material Side Menu you could 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>

Plunkr

I could give you the idea about md-select which will be act as 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';

});

Working Plunkr