javascript - 如何使用 Material Angular 在导航栏上做下拉元素

标签 javascript css angularjs navbar angular-material

我将 Angularjs 与 googles Material Angular 库一起使用 https://material.angularjs.org/

他们在他们网站的导航栏中有下拉元素,但我找不到任何对象或示例来制作我自己的元素。

我怎样才能做到这一点?

谢谢!

最佳答案

您可以在下面的代码中使用 Angular Material Side Menu

标记

<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>

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

关于javascript - 如何使用 Material Angular 在导航栏上做下拉元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29397130/

相关文章:

firefox 扩展中的 jQuery UI 位置实用程序

javascript - 使用 Angularjs 通过下拉菜单启用/禁用按钮

javascript - 在 AngularJS 中查询后运行代码

javascript - 根据屏幕尺寸/媒体查询更改 Bootstrap 列类属性

html - 在 IE9 的跨域请求中不从 JSP 链接 CSS 文件

html - CSS 只能跨浏览器剪 Angular ?

javascript - 如何在 Angular ui 路由器上转换到另一个模式后关闭模式

javascript - 复选框图像替换,没有任何反应

php - 使用 ajaxRequest.open 将变量发送到 php

javascript - Angular 2,尝试使用 http.get 时出现 localhost/null 错误?